第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

使用 Javascript 附加選取框 div

使用 Javascript 附加選取框 div

藍(lán)山帝景 2022-06-16 15:35:33
我有以下 HTML 結(jié)構(gòu)<div class="header">  <div class="inner">123....................</div>  <div class="inner-1">123....................</div> etc</div>現(xiàn)在我想在標(biāo)題 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 代碼。請(qǐng)幫忙。請(qǐng)看我的代碼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;}";這里的代碼正在運(yùn)行，但問題是.ribdiv 出現(xiàn)在 .header div 的結(jié)尾，即：.ribdiv 出現(xiàn)在 .header 之后.inner-1 div。但我希望.ribdiv 需要在.inner div
查看完整描述

2 回答

?
慕的地6264312

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超6個(gè)贊

您可以使用以下方法創(chuàng)建.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>


查看完整回答
反對(duì) 回復(fù) 2022-06-16
?
當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

  1. 定義htmlString時(shí)，使用模板文字語法，用重音符 (```) 包裹整個(gè)字符串。

  2. .append()在目標(biāo)元素內(nèi)容之后插入在.prepend()內(nèi)容之前插入。

  3. 一個(gè)更好的方法是.insertAdjacentHTML()。它的第一個(gè)參數(shù)確定相對(duì)于目標(biāo)元素的位置，第二個(gè)參數(shù)是一個(gè) htmlString，用于插入并呈現(xiàn)到真實(shí)的 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>


查看完整回答
反對(duì) 回復(fù) 2022-06-16
  • 2 回答
  • 0 關(guān)注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)