亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 Javascript 附加選取框 div

使用 Javascript 附加選取框 div

藍山帝景 2022-06-16 15:35:33
我有以下 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
查看完整描述

2 回答

?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

您可以使用以下方法創建.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>


查看完整回答
反對 回復 2022-06-16
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

  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>


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號