使用JavaScript附加字幕div

Question

我具有以下HTML结构

<div class="header">

<div class="inner">123....................</div>
<div class="inner-1">123....................</div> etc
</div>

现在我想在标题div内附加以下div

<div style="font-size: small; font-family: helvetica" class="rib">
  <p style="color: #ffffff; background-color: green;"><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">My text </marquee></p>
</div>

我需要JavaScript代码，而不是jqury代码。请帮助。

请查看我的代码

<script>
var ril = document.createElement('div');
ril.setAttribute("class", "ribbon");

ril.innerHTML = "<p style='color: #ffffff; background-color: green;'><marquee behavior='scroll' direction='left' onmouseover='this.stop();' onmouseout='this.start();'>My text </marquee></p>";
document.querySelector(".header").appendChild(ril);
var ril = document.createElement('style');
ril.innerHTML = ".rib{font-size: small; font-family: helvetica;}";

</script>

这里代码正在工作，但是问题是。rib div在.header div的末尾，即：.rib div在.inner-1 div之后。但我希望.rib div必须先于.inner div

Answer 1

您好，这是您遇到问题的javaScript示例。.

请检查此代码。

document.getElementById('header').innerHTML += '<div style="font-size: small; font-family: helvetica" class="rib"><p style="color: #ffffff; background-color: green;"><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">My text </marquee></p></div>';

<div id="header">

<div class="inner">123....................</div>
<div class="inner-1">123....................</div> etc
</div>