使用Javascript追加字幕div

我有以下HTML结构

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

123....................
123.................... 等

现在我想在header 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代码，而不是jquery代码。请帮忙

请看我的密码

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;}";

var ril=document.createElement（'div'）；
setAttribute（“类”、“功能区”）；
ril.innerHTML=“
我的文本”
”；
document.querySelector（“.header”）.appendChild（ril）；
var ril=document.createElement（'style'）；
ril.innerHTML=“.rib{font size:small；font-family:helvetica；}”；

这里代码正常，但问题是

.rib

div出现在.header div的末尾，即：

.rib

div出现在

.inner-1 div

之后。但是我想要

。rib

div需要在

之前。inner div

定义htmlString时，请使用语法，将整个字符串用严重重音（```括起来）

.append（）

在目标元素内容

之后插入。prepend（）

在内容之前插入

一个更好的方法是。它的第一个参数确定相对于目标元素的位置，第二个参数是要插入并呈现到真实HTML中的htmlString

示例

<div class='target'> TEXT <b>TEXT</b> </div>

<script>
/* 
position can be "beforebegin", "afterbegin", "beforeend", or "afterend"
(see next sample code)
*/
const htmlString = `!!!<u>INSERTED HTML</u>!!!`;

document.querySelector('.target').insertAdjacentHTML(position, htmlString);
</script>

文本
/* 
位置可以是“beforebegin”、“afterbegin”、“beforeend”或“afterend”
（参见下一个示例代码）
*/
常量htmlString=`！！！插入HTML！！！`；
document.querySelector（'.target'）.insertAdjacentHTML（位置，htmlString）；

位置

<!-- "beforebegin" = Externally inserts html before the target -->

!!!<u>INSERTED HTML</u>!!!<div class='target'> TEXT <b>TEXT</b> </div>

<!-- "afterbegin" = Internally inserts html before the target content -->

 <div class='target'>!!!<u>INSERTED HTML</u>!!! TEXT <b>TEXT</b> </div>

<!-- "beforeend" = Internally inserts html after the target content -->

 <div class='target'> TEXT <b>TEXT</b> !!!<u>INSERTED HTML</u>!!!</div>

<!-- "afterend" = Externally inserts html after the target -->

 <div class='target'> TEXT <b>TEXT</b> </div>!!!<u>INSERTED HTML</u>!!!

!!!插入HTML！！！文本
!!!插入HTML！！！文本
文本文本！！！插入HTML！！！
文本文本！！！插入HTML！！！

---

演示

const htmlString=`
我的文本

`;
document.querySelector（'.header'）.insertAdjacentHTML（'afterbegin'，htmlString）

123....................
123.................... 等

定义htmlString时，请使用语法，将整个字符串用严重重音（```括起来）

.append（）
在目标元素内容
之后插入。prepend（）
在内容之前插入

一个更好的方法是。它的第一个参数确定相对于目标元素的位置，第二个参数是要插入并呈现到真实HTML中的htmlString

示例

<div class='target'> TEXT <b>TEXT</b> </div>

<script>
/* 
position can be "beforebegin", "afterbegin", "beforeend", or "afterend"
(see next sample code)
*/
const htmlString = `!!!<u>INSERTED HTML</u>!!!`;

document.querySelector('.target').insertAdjacentHTML(position, htmlString);
</script>

文本
/* 
位置可以是“beforebegin”、“afterbegin”、“beforeend”或“afterend”
（参见下一个示例代码）
*/
常量htmlString=`！！！插入HTML！！！`；
document.querySelector（'.target'）.insertAdjacentHTML（位置，htmlString）；

位置

<!-- "beforebegin" = Externally inserts html before the target -->

!!!<u>INSERTED HTML</u>!!!<div class='target'> TEXT <b>TEXT</b> </div>

<!-- "afterbegin" = Internally inserts html before the target content -->

 <div class='target'>!!!<u>INSERTED HTML</u>!!! TEXT <b>TEXT</b> </div>

<!-- "beforeend" = Internally inserts html after the target content -->

 <div class='target'> TEXT <b>TEXT</b> !!!<u>INSERTED HTML</u>!!!</div>

<!-- "afterend" = Externally inserts html after the target -->

 <div class='target'> TEXT <b>TEXT</b> </div>!!!<u>INSERTED HTML</u>!!!


!!!插入HTML！！！文本
!!!插入HTML！！！文本
文本文本！！！插入HTML！！！
文本文本！！！插入HTML！！！


演示

const htmlString=`
我的文本

`;
document.querySelector（'.header'）.insertAdjacentHTML（'afterbegin'，htmlString）

123....................
123.................... 等
您可以创建
.rib
，然后使用以下方法将其插入文档：

insertBefore()

工作示例：


//创建肋骨
const rib=document.createElement（'div'）；
rib.classList.add（'rib'）；
rib.innerHTML=`

我的文字

`;
//在文档中插入肋骨
const header=document.getElementsByTagName（'header'）[0]；
const inner=document.getElementsByCassName（'inner'）[0]；
头。前插（肋，内）；
//将事件侦听器添加到ribMarquee
const ribMarquee=document.getElementsByClassName（'ribMarquee'）[0]；
ribMarquee.addEventListener（'mouseover'，（e）=>e.target.stop（），false）；
ribMarquee.addEventListener（'mouseout'，（e）=>e.target.start（），false）
.rib{
字体大小：小；
字体系列：helvetica
}
.RIB段{
颜色：#ffffff；
背景颜色：绿色；
}

123....................
123....................
您可以创建
.rib
，然后使用以下方法将其插入文档：

insertBefore()

工作示例：


//创建肋骨
const rib=document.createElement（'div'）；
rib.classList.add（'rib'）；
rib.innerHTML=`

我的文字

`;
//在文档中插入肋骨
const header=document.getElementsByTagName（'header'）[0]；
const inner=document.getElementsByCassName（'inner'）[0]；
头。前插（肋，内）；
//将事件侦听器添加到ribMarquee
const ribMarquee=document.getElementsByClassName（'ribMarquee'）[0]；
ribMarquee.addEventListener（'mouseover'，（e）=>e.target.stop（），false）；
ribMarquee.addEventListener（'mouseout'，（e）=>e.target.start（），false）
.rib{
字体大小：小；
字体系列：helvetica
}
.RIB段{
颜色：#ffffff；
背景颜色：绿色；
}

123....................
123....................
请查看我的更新问题请查看我的更新问题