Javascript - Добавить HTML с UserScripts
Я новичок в Javascrip и UserScripts, и мне нужна ваша помощь, потому что я застрял с чем-то...
По сути, я пытаюсь добавить другие кнопки клиентским способом в поле ответа на форуме.
Посмотрите фотографии того, как это на самом деле выглядит и как я хочу, чтобы это выглядело...
Я использую для этого функции TamperMonkey UserScripts и Javascript.
Я знаю, что должен использовать
document.getElementsByClassName();
а также
x[0].innerHTML = something;
Проблема в том, что каждая кнопка является членом списка и имеет свой собственный класс. Его стиль также определяется классом.
Ниже код одной из кнопок...
<li class="markItUpButton markItUpButton16 preview"><a href="" title="Preview">Preview</a></li>
Я думал, что просто мог получить HTML-код последней кнопки списка с помощью функции getElements, добавить другой HTML-код для новой кнопки в конце 1-го элемента массива, возвращенного getElements, и отобразить его в браузере с помощью .innerHTML.
Но, к сожалению, это не сработало, и я не понимаю, почему...
Мой код должен выглядеть так
myfunction() {
var ReturnedCode;
var NewButtonHTMLCode = '<li class="markItUpButton markItUpButton17 NewButton"><a href="" title="NewButtonAction">NewButton</a></li>';
ReturnedCode = document.getElementsByClassName("markItUpButton markItUpButton16 preview").join;
var FinalCode = ReturnedCode + NewButtonHTMLCode;
document.getElementsByClassName("markItUpButton markItUpButton16 preview").innerHTML[0] = FinalCode;
}<div class="markItUpContainer">
<div class="markItUpHeader">
<ul>
<li class="markItUpButton markItUpButton1 ">
<a href="" accesskey="B" title="Bold [Ctrl+B]">Bold</a>
</li>
<li class="markItUpButton markItUpButton2 ">
<a href="" accesskey="I" title="Italic [Ctrl+I]">Italic</a>
</li>
<li class="markItUpButton markItUpButton3 ">
<a href="" accesskey="U" title="Underline [Ctrl+U]">Underline</a>
</li>
<li class="markItUpButton markItUpButton4 ">
<a href="" accesskey="S" title="Stroke [Ctrl+S]">Stroke</a>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton5 ">
<a href="" accesskey="P" title="Picture [Ctrl+P]">Picture</a>
</li>
<li class="markItUpButton markItUpButton6 ">
<a href="" accesskey="L" title="Link [Ctrl+L]">Link</a>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton7 markItUpDropMenu">
<a href="" accesskey="S" title="Size [Ctrl+S]">Size</a>
<ul>
<li class="markItUpButton markItUpButton7-1 ">
<a href="" title="Big">Big</a>
</li>
<li class="markItUpButton markItUpButton7-2 ">
<a href="" title="Small">Small</a>
</li>
</ul>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton8 ">
<a href="" title="Bulleted list">Bulleted list</a>
</li>
<li class="markItUpButton markItUpButton9 ">
<a href="" title="Numeric list">Numeric list</a>
</li>
<li class="markItUpButton markItUpButton10 ">
<a href="" title="List item">List item</a>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton11 ">
<a href="" title="Quotes">Quotes</a>
</li>
<li class="markItUpButton markItUpButton12 markItUpDropMenu">
<a href="" title="Smiles">Smiles</a>
<ul style="display: none;">
<li class="markItUpButton markItUpButton12-1 ">
<a href="" title="Smile">Smile</a>
</li>
<li class="markItUpButton markItUpButton12-2 ">
<a href="" title="Neutral">Neutral</a>
</li>
<li class="markItUpButton markItUpButton12-3 ">
<a href="" title="Sad">Sad</a>
</li>
<li class="markItUpButton markItUpButton12-4 ">
<a href="" title="Big smile">Big smile</a>
</li>
<li class="markItUpButton markItUpButton12-5 ">
<a href="" title="Yikes">Yikes</a>
</li>
<li class="markItUpButton markItUpButton12-6 ">
<a href="" title="Wink">Wink</a>
</li>
<li class="markItUpButton markItUpButton12-7 ">
<a href="" title="Hmm">Hmm</a>
</li>
<li class="markItUpButton markItUpButton12-8 ">
<a href="" title="Tongue">Tongue</a>
</li>
<li class="markItUpButton markItUpButton12-9 ">
<a href="" title="Lol">Lol</a>
</li>
<li class="markItUpButton markItUpButton12-10 ">
<a href="" title="Mad">Mad</a>
</li>
<li class="markItUpButton markItUpButton12-11 ">
<a href="" title="Roll">Roll</a>
</li>
<li class="markItUpButton markItUpButton12-12 ">
<a href="" title="Cool">Cool</a>
</li>
</ul>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton13 browser-os-button">
<a href="" title="Paste browser / operating system versions">Paste browser / operating system versions</a>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton14 scratchblocks-button markItUpDropMenu">
<a href="" title="Scratchblocks">Scratchblocks</a>
</li>
<li class="markItUpSeparator">---------------</li>
<li class="markItUpButton markItUpButton15 clean">
<a href="" title="Clean">Clean</a>
</li>
<li class="markItUpButton markItUpButton16 preview">
<a href="" title="Preview">Preview</a>
</li>
</ul>
</div>
<textarea class="markup markItUpEditor" cols="95" id="id_body" name="body" rows="20"></textarea>
<div class="markItUpFooter">
<div class="markItUpResizeHandle"></div>
</div>
</div>
<script>
function myfunction()
</script>Может кто-нибудь мне помочь? Даже если ошибка очевидна для вас, это не для меня... Спасибо.
1 ответ
window.onload= function() {
Array.prototype.forEach.call(document.getElementsByClassName("markItUpButton"),el=>el.innerHTML+=" added");
};
Ваш код не будет работать в любом случае. Так что вы можете подождать, пока страница загрузится, затем перебрать все элементы и добавить sth к innerhtml ( +=) ...