在我的页面上，我有：
<div id='something'></div>
我想使用JS将这种类型的“按钮”附加到它：
<a href="/news_events/"><span class="picon-p-add-news"></span>Read more news</a>
我尝试使用document.createElement，但是我不确定如何使它不仅仅是将其附加为文本。我该怎么做呢 ？
小智 5
诸如此类，您可以在其中通过函数参数传递元素ID和URL。
<!DOCTYPE html>
<html>
<head>
<script>
function appendButton(elementId, url){
var buttonEl = document.createElement("a");
buttonEl.href = url;
var buttonTextEl = document.createElement("span");
buttonTextEl.className = "picon-p-add-news";
buttonTextEl.innerText = "Read more news";
buttonEl.appendChild(buttonTextEl);
document.getElementById(elementId).appendChild(buttonEl);
}
</script>
</head>
<body>
<div>
<button id="button">Click to add</button>
<div id='something'></div>
</div>
<script>
document.getElementById("button").addEventListener('click', () => appendButton("something", "/news_events/"));
</script>
</body>
</html>1）创建一个元素：
var aEl = document.createElement('a');
aEl.href = "/news_events/"
2）创建span元素：
var spanEl = document.createElement('span');
spanEl.classList.add('picon-p-add-news');
3) 将span元素追加到一个元素上
aEl.appendChild(spanEl);
4) 在元素中插入文本
aEl.insertAdjacentText('beforeend','Read more news');
5）将整棵树附加到你的div上
var divEl = document.getElementById('something');
divEl.appendChild(aEl);
| 归档时间： |
|
| 查看次数： |
2888 次 |
| 最近记录： |