使用JavaScript在网页添加按钮和标签

使用JavaScript动态操作网页元素

在网页开发中，我们经常需要使用JavaScript来动态地添加、修改或删除HTML元素。本文将介绍如何使用JavaScript在网页中添加按钮和标签，并为其设置样式和属性。

1. 使用innerHTML属性添加HTML代码

我们可以使用JavaScript的innerHTML属性将一段HTML代码字符串插入到现有的HTML元素中。例如，要在页面上添加一个按钮，可以使用以下代码：

var buttonHTML = '<button style="outline:none; position:fixed; bottom:7%; right:7%; z-index:999; border-radius:5px; color:#166188;"><b>加入书架</b></button>';
document.body.innerHTML += buttonHTML;

这段代码将创建一个带有样式的'加入书架'按钮，并将其添加到页面的body元素的末尾。

2. 使用createElement和appendChild方法创建和添加元素

除了使用innerHTML属性，我们还可以使用JavaScript的DOM API来创建和添加元素。例如，要在一个名为'imglist'的ul元素的每个li子元素中添加一个'加入书架'的链接，可以使用以下代码：

var listItems = document.querySelectorAll('.imglist li');

for (var i = 0; i < listItems.length; i++) {
  var newLink = document.createElement('a');
  newLink.href = '#';
  newLink.className = 'addToShelf';
  newLink.textContent = '加入书架';
  listItems[i].appendChild(newLink);
}

这段代码首先使用querySelectorAll方法获取所有class为'imglist'的ul元素下的li元素。然后，循环遍历每个li元素，并使用createElement方法创建一个新的a标签，设置其href属性、class属性和文本内容。最后，使用appendChild方法将新创建的a标签添加到每个li元素中。

3. 根据URL添加特定元素

在某些情况下，我们可能需要根据当前页面的URL来决定是否添加特定的元素。例如，下面的代码段展示了如何在符合特定正则表达式的URL的页面中添加一个'加入书架'按钮：

if (//book/1_\d+_\d+.shtml/.test(window.location.href)) {
  var bookURL = window.location.href;
  var addButton = document.createElement('a');
  addButton.href = 'legado://import/addToBookshelf?src=' + encodeURIComponent(bookURL) + ',{origin:'https://www.nvquge.com'}';
  addButton.innerHTML = '<button style="border-radius:5px; color:#166188;"><b>加入书架</b></button>';
  document.body.appendChild(addButton);
}

这段代码首先使用正则表达式判断当前页面URL是否符合书籍页面的格式。如果是，则获取当前页面URL，并创建一个新的a标签，设置其href属性为包含书籍URL的特定格式，并添加一个样式化的'加入书架'按钮作为其内容。最后将这个a标签添加到页面的body元素中。

总结

本文介绍了如何使用JavaScript在网页中动态添加按钮和标签，并为其设置样式和属性。你可以根据自己的需求，灵活运用这些方法来操作网页元素，实现更加丰富的网页交互效果。