我正在編輯一個相當原始的論壇，它不會讓我修改 HTML，我只能編輯 CSS。因此，我想看看是否可以使用包含更多現有元素的 Javascript 在 HTML 中添加 <div class""> 。
當前的 HTML 如下：
<div class="details">
<div class="avatar">
<img src="https://i.imgur.com/1r7oGBt.png"></div>
<p><span class="u_title">None</span>
<span class="u_rank"></span></p>
<dl class="u_group"><dt>Group</dt><dd>User</dd></dl>
<dl class="u_posts"><dt>Messages</dt><dd>52</dd></dl>
<dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>0</dd></dl>
<dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div>我希望它是這樣的，即使用：
<div class="details">
<div class="avatar">
<img src="https://i.imgur.com/1r7oGBt.png"></div><div class="overlay">
<p><span class="u_title">None</span>
<span class="u_rank"></span></p>
<dl class="u_group"><dt>Group</dt><dd>User</dd></dl>
<dl class="u_posts"><dt>Messages</dt><dd>52</dd></dl>
<dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>0</dd></dl>
<dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div></div>這可能嗎？
抱歉，我無法提供更多資訊，我是 javascript 初學者。非常感謝。
uj5u.com熱心網友回復：
我想你需要這樣的東西
let messages = 52;
let score = 0;
document.body.insertAdjacentHTML('afterbegin',`
<div class="details">
<div class="avatar">
<img src="https://i.imgur.com/1r7oGBt.png"></div><div class="overlay">
<p><span class="u_title">None</span>
<span class="u_rank"></span></p>
<dl class="u_group"><dt>Group</dt><dd>User</dd></dl>
<dl class="u_posts"><dt>Messages</dt><dd>${messages}</dd></dl>
<dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>${score}</dd></dl>
<dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div></div>
`);
在上面的代碼中，如您所見，您可以將訊息和分數動態插入到字串中，也可以使用 javascript 將 html 動態添加到 html 檔案的正文中
uj5u.com熱心網友回復：
它非常容易，用于document.createElement創建元素、添加屬性并將其附加到所選元素。
var myEl = document.createElement("div");
// use "className" because JavaScript "class" is a reserved keyword.
myEl.className = "myClass";
// Append it
document.querySelector("div").appendChild(myEl);
作業現場示例：
var myEl = document.createElement("div");
// use "className" because JavaScript "class" is a reserved keyword.
myEl.className = "myClass";
// Append it
document.querySelector("div").appendChild(myEl);
if (!!myEl) {
myEl.textContent = "You can append other attributes too!";
}<div>
</div>您也可以將其添加為父元素：
var currentEl = document.querySelector("div");
currentEl.outerHTML = `<div >${currentEl.outerHTML}</div>`;
您也可以附加許多其他屬性。
createElement在https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement閱讀更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352352.html
標籤：javascript html