javascript - 使用 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 代码，而不是 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;}";

这里代码可以工作，但问题是 .rib div 出现在 .header div 的末尾，即: .rib div 出现在之后.inner-1 div。但我希望 .rib div 需要位于 .inner div

之前

Answer 1

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

insertBefore()

工作示例:

// Create rib
const rib = document.createElement('div');
rib.classList.add('rib');
rib.innerHTML = `
<p class="ribParagraph">
<marquee class="ribMarquee" behavior="scroll" direction="left">My text</marquee>
</p>
`;

// Insert rib into document
const header = document.getElementsByTagName('header')[0];
const inner = document.getElementsByClassName('inner')[0];
header.insertBefore(rib, inner);

// Add Event Listeners to ribMarquee
const ribMarquee = document.getElementsByClassName('ribMarquee')[0];
ribMarquee.addEventListener('mouseover', (e) => e.target.stop(), false);
ribMarquee.addEventListener('mouseout', (e) => e.target.start(), false);

.rib {
  font-size: small;
  font-family: helvetica
}

.ribParagraph {
  color: #ffffff;
  background-color: green;
}

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