在javascript中的文本节点内添加内联标签

Posted 2023-05-07

【中文标题】在javascript中的文本节点内添加内联标签

【英文标题】：Adding inline tags within text node in javascript

【发布时间】：2020-10-18 00:30:28

【问题描述】：

您好，这可能很容易，但我是新手，刚刚学习我需要帮助解决 2 个问题。

首先，使用document.createElement()创建元素时，如何为该元素添加class或id？

----通过添加一个变量来区分来自我添加并命名为id的数组的数据，找到了className = ""或id=""问题的解决方案----

二、使用createTextNode()避免使用innerhtml如何在里面添加换行标签？

假设我有一个 items = [id: "item-1", name: "apple", price:1 , id:"item-2" ,name : "mango", price:3]; 数组

我想通过它们：

let data = document.getElementById("items-data"); 
items.forEach(item => 
                   let container = document.createElement("div"),  //here i want to add a defined id for further use
                       itemData = document.createTextNode(
                                  `item name : $item.name price: $item.price`); //here i want to add the br
    container.appendChild(itemData);
    container.id = item.id;
    data.appendChild(container);
;

【参考方案1】：

你的意思是这样的：

container.appendChild(document.createElement("br"));

let base = document.querySelector(".base");

let items = [
  id: "item-1",
  name: "apple",
  price: 1
, 
  id: "item-2",
  name: "mango",
  price: 3
];

items.forEach(item => 
  let container = document.createElement("div"), //here i want to add a defined id for further use
    itemData = document.createTextNode(
      `item name : $item.name price: $item.price`); //here i want to add the br
  container.appendChild(itemData);
  container.appendChild(document.createElement("br")); // <-- Add the line break to the node element
  container.id = item.id;
  base.appendChild(container);
);

<div class="base"></div>

【讨论】：

它有效，但我已经附加了短语的一部分附加 然后另一部分附加