JavaScript 注入标签及并列标签创建

在页面上通过 JavaScript 注入标签

要在页面上通过 JavaScript 注入添加标签，可以使用以下代码:

创建新的标签元素

var newElement = document.createElement('tagName');

其中 'tagName' 是你想要创建的标签名称，例如 'div'、'p'、'img' 等等。

设置标签属性

newElement.setAttribute('attributeName', 'attributeValue');

这里的 'attributeName' 是标签属性名，例如 'id'、'class'、'src' 等等。'attributeValue' 是该属性的值。

添加文本内容

newElement.textContent = 'text';

这里的 'text' 是你想要在标签中添加的文本内容。

将标签添加到页面中

document.body.appendChild(newElement);

将新创建的标签添加到页面中，可以使用 document 的 body 属性，或者选择其他合适的父节点。

综合起来，以下是一个简单的示例代码:

var newElement = document.createElement('div');
newElement.setAttribute('id', 'myNewDiv');
newElement.textContent = 'Hello, world!';
document.body.appendChild(newElement);

以上代码会创建一个新的 div 标签，设置 id 属性为 'myNewDiv'，添加文本内容 'Hello, world!'，并将其添加到页面的末尾。

为动态加载出来的标签创建并列标签

要为动态加载出来的标签创建并列标签，可以使用 DOM 操作在 JavaScript 中创建新的标签元素，并将其添加到页面中。下面是一个示例代码，假设页面中已经有一个 id 为 'container' 的元素:

var container = document.getElementById('container');
// 创建新的标签元素
var newElement = document.createElement('div');
newElement.textContent = 'This is a dynamic element.';
// 创建并列标签
var siblingElement = document.createElement('div');
siblingElement.textContent = 'This is a sibling element.';
// 将新标签和并列标签添加到容器中
container.appendChild(newElement);
container.appendChild(siblingElement);

以上代码中，我们首先通过 document.getElementById 获取了容器元素。然后用 document.createElement 创建了一个新的 div 标签元素，并设置其文本内容。接下来再创建一个并列的 div 标签元素，同样设置了其文本内容。最后，通过 appendChild 将两个新创建的标签元素添加到容器中。运行以上代码后，就会在容器中动态加载出一个新的标签元素，并且在该标签后面添加了一个并列的标签元素。

需要注意的是，如果要在一个已经存在的标签元素上添加并列标签，可以使用该元素的 parentNode.insertBefore 方法，例如:

var container = document.getElementById('container');
var existingElement = document.getElementById('existing');
// 创建并列标签
var siblingElement = document.createElement('div');
siblingElement.textContent = 'This is a sibling element.';
// 在现有元素之前添加并列标签
container.insertBefore(siblingElement, existingElement);

以上代码中，首先获取了一个已经存在的标签元素 existing，然后创建了一个新的并列标签元素，最后使用该元素的 parentNode.insertBefore 方法将其添加到容器中，并插入到这个已经存在的标签元素之前。

处理动态加载标签延迟问题

如果动态加载标签存在延时，可以使用事件监听器来确保在标签加载完成后再创建并列标签。例如，在以下示例代码中，我们使用了 window.onload 事件监听器来确保在页面完全加载完成后再添加新的标签和并列标签:

window.onload = function() {
  var container = document.getElementById('container');
  // 创建新的标签元素
  var newElement = document.createElement('div');
  newElement.textContent = 'This is a dynamic element.';
  // 创建并列标签
  var siblingElement = document.createElement('div');
  siblingElement.textContent = 'This is a sibling element.';
  // 将新标签和并列标签添加到容器中
  container.appendChild(newElement);
  container.appendChild(siblingElement);
}

在这个示例中，我们使用了 window.onload 事件监听器来确保在页面完全加载完成后再执行 JavaScript 代码。在事件监听器内部，我们首先获取了容器元素，然后创建了一个新的标签元素和一个并列标签元素，并将它们添加到容器中。这样，即使动态加载标签存在延时，我们也可以确保在标签加载完成后再创建并列标签。