Vector is currently in the process of revising the content under the title. This caused breakage in certain gadgets (T315639) and highlighted a need for a more reliable stable API
Currently gadgets add content under the title by targetting the #contentSub element. The #contentSub element however is not always present - it just so happens various skins decided to mark up elements this way.
Going forward similar to mw.util.$content we should have an element that always represents the subtitle no matter what ID it has or it's position in the DOM.
# Use cases
* https://gerrit.wikimedia.org/g/mediawiki/extensions/VisualEditor/+/acc6e62a84686ebdd4cceea8ae77b63423f4796a/modules/ve-mw/init/targets/ve.init.mw.ArticleTarget.js#608 (no need for multiple selectors)
* In future this could be used to build a function for updating redirect (https://gerrit.wikimedia.org/g/mediawiki/extensions/VisualEditor/+/acc6e62a84686ebdd4cceea8ae77b63423f4796a/modules/ve-mw/init/targets/ve.init.mw.ArticleTarget.js#2349)
# QA steps
Perform the following on the Timeless (useskin=timeless), Minerva (useskin=minerva) and Vector 2022 skins
1) Run the following code:
```
var node = document.createElement('div');
node.textContent = 'hello world!';
mw.util.addSubtitle(node)
```
it should add hello world to the subtitle area (under the title).
2) Run the following code:
```
mw.util.addSubtitle('<div>test</div>')
```
it should add test to the subtitle area (under the title).
3) Clear subtitle
```
mw.util.clearSubtitle();
```
subtitle should disappear.
# Sign off steps
[] Create a user notice