使用 javascript 向现有 DIV 添加按钮

新手上路,请多包涵

在我的页面上,我有:

  <div id='something'></div>

我想使用 JS 将这种类型的“按钮”附加到它:

 <a href="/news_events/"><span class="picon-p-add-news"></span>Read more news</a>

我尝试使用 document.createElement 但我不确定如何让它不只是将其作为文本附加。我该怎么做呢 ?

原文由 Mike Q 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 679
1 个回答

像这样,您可以在其中通过函数参数传递元素 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>

原文由 Avet Brutyan 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题