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

这里的代码正在运行，但问题是.ribdiv 出现在 .header div 的结尾，即：.ribdiv 出现在 .header 之后.inner-1 div。但我希望.ribdiv 需要在.inner div

Answer 1

您可以使用以下方法创建.rib并将其插入到文档中：insertBefore()工作示例：// Create ribconst 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 documentconst header = document.getElementsByTagName('header')[0];const inner = document.getElementsByClassName('inner')[0];header.insertBefore(rib, inner);// Add Event Listeners to ribMarqueeconst ribMarquee = document.getElementsByClassName('ribMarquee')[0];ribMarquee.addEventListener('mouseover', (e) => e.target.stop(), false);ribMarquee.addEventListener('mouseout', (e) => e.target.start(), false);.rib {&nbsp; font-size: small;&nbsp; font-family: helvetica}.ribParagraph {&nbsp; color: #ffffff;&nbsp; background-color: green;}<header><div class="inner">123....................</div><div class="inner-1">123....................</div><header>

Answer 2

定义htmlString时，使用模板文字语法，用重音符 (```) 包裹整个字符串。.append()在目标元素内容之后插入在.prepend()内容之前插入。一个更好的方法是.insertAdjacentHTML()。它的第一个参数确定相对于目标元素的位置，第二个参数是一个 htmlString，用于插入并呈现到真实的 HTML 中。例子<div class='target'> TEXT <b>TEXT</b> </div><script>/*&nbsp;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" = 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 -->&nbsp;<div class='target'>!!!<u>INSERTED HTML</u>!!! TEXT <b>TEXT</b> </div><!-- "beforeend" = Internally inserts html after the target content -->&nbsp;<div class='target'> TEXT <b>TEXT</b> !!!<u>INSERTED HTML</u>!!!</div><!-- "afterend" = Externally inserts html after the target -->&nbsp;<div class='target'> TEXT <b>TEXT</b> </div>!!!<u>INSERTED HTML</u>!!!演示const htmlString = `<div style="font-size: small; font-family: helvetica" class="rib">&nbsp; <p style="color: #ffffff; background-color: green;"><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">My text </marquee></p></div>`;document.querySelector('.header').insertAdjacentHTML('afterbegin', htmlString);<div class="header"><div class="inner">123....................</div><div class="inner-1">123....................</div> etc</div>