使用 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 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>

Answer 2

1. 定义htmlString时，使用模板文字语法，用重音符 (```) 包裹整个字符串。

2. .append()在目标元素内容之后插入在.prepend()内容之前插入。

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

   例子

<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" = 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>!!!

演示

const htmlString = `<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>`;

document.querySelector('.header').insertAdjacentHTML('afterbegin', htmlString);

<div class="header">

<div class="inner">123....................</div>

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

</div>