createelement 相关问题

您应该使用innerHTML向DOM添加HTML还是通过逐一创建新元素来添加HTML？

有两种方法可以将 HTML 代码添加到 DOM，但我不知道最好的方法是什么。 第一种方法 第一种方法很简单，我可以简单地使用 $('[code

适用于 IE6.0 的 HTML5

您知道有什么方法可以将此 HTML 代码优化到 IE6 或 7（或 8）而不添加任何 HTML 元素，或者 IE 跳过所有 HTML5 元素吗？ 如果我只想用 CSS 格式化元素，-我...

<br> 标签不适用于 AppendChild() 并显示：flex

我正在制作一个待办事项列表程序，在每个复选框之后，应该有一个新行。但是 br 函数不起作用，我认为它与 CSS 文本有关，其中代码是 display: flex...

从数组中提取值并将其添加到新元素

我有一些循环遍历产品数组的代码，它记录找到的新类别以及找到某个类别的次数： constcategoriesFound = (catArray) => { 让类别...

javascript 使用 onclick 创建按钮

我正在尝试使用javascript创建一个具有onclick事件的按钮，该事件调用head中定义的函数，该函数接受相对于按钮的dom对象作为参数。我该怎么做？...

如何将每个具有唯一 ID 的 H2 拉到 div 块内而不是处于活动状态？

我从一篇文章中获得了这段代码，该文章将每个 h2 拉入内容列表，您可以在页面上轻松导航。唯一 ID 使用值“i”创建。 现在我想把 h2 插入 a

如何为包装组件构建 React 元素树？

考虑我有以下应用程序结构 常量应用程序 = () => { 返回 } const 标头 = () => { 返回<>标题<...

使用 Javascript 的 CSS 样式属性值无效

我正在尝试使用 Javascript 创建元素并设置其样式： var div_html = document.createElement("div"); var div = document.createElement("div"); div.setAttribute("class", "div_class"); div.st...

尝试使用 Google Analytics 4 函数创建 document.createElement('script')

我正在将我的网站转移到 GoogleAnalytics 4，我需要将以下脚本添加到页面中。如果单击接受 cookies 按钮，我将使用 JS 将其添加到头部。

为什么创建的元素在创建后立即从网站上消失？

输入后： 数字 文本（作为文本添加到 div 元素中） 选择（分区或部分） 单击“创建”按钮后 给定数量的 div 将出现在该部分中。 这...

如何将 javascript 代码作为表单输入并附加到 DOM 元素的事件监听器代码

我正在尝试开发一个项目，我们允许用户创建 HTML 元素并向其附加适当的事件侦听器代码（https://codesandbox.io/s/interactive-objects-tjvvhv?file=/src /...

如何在 JSX 中连续追加 HTML 元素？ （反应）

函数示例 () { 返回 （ 。 。 ？ 添加新输入 )} 让我们假装我们是

无法读取 null 的属性（读取“addEventListener”）错误

我有这样一个JavaScript const checkBox = document.createElement("输入") checkBox.className = "form-check-input me-1 fa-pull-right" checkBox.type = "复选框" li.appendChild(checkBox); 检查博...

原生组件反应速度提高 50%

我在 Twitter 上阅读了这些帖子，他们说可以将组件速度提高 50%。 链接：https://twitter.com/natebirdman/status/1695511232298783079 链接：https://twitter.com/

为创建的元素设置属性

我已经有 3 个段落，需要使用 JavaScript 创建第 4 个段落 就创建成功了。 const new_h2 = document.createElement('h2') 并为 h2 分配一个 ID new_h2.setAttribute('...

为什么文本和 SVG 元素之间有间隙？

我想要 SVG 图标附近的文本，但我无法实现这一点。元素之间总是有很大的空间。你能帮助我吗？ var 勾选 = ' 我想要 SVG 图标附近的文本，但我无法实现这一点。元素之间总是有很大的空间。你能帮我吗？ var tick = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/></svg>' var cross = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>' const fragment = document.createElement('span') fragment.style.display = 'flex' const l1 = document.createElement("label") l1.textContent = "HWjgvttgvyvytvhgvhgvhgvhtvytcytcytcytcytcyt"; l1.style.marging='0' //l1.style.flex='auto' const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.innerHTML = tick svg.style.marging='0' //svg.style.flex='auto' fragment.appendChild(svg) fragment.appendChild(l1) document.body.appendChild(fragment); 我尝试了 flex、inline-block、grid 作为 display 属性 使用开发工具检查它，它会告诉你什么占用了空间。看看这个 您有一个 <svg> 元素作为字符串，然后创建一个新的 svg 元素并将 <svg> 字符串作为该新元素的子内容。 此外，您正在设置 style.marging 我认为您的意思是设置 style.margin 请参阅以下更改。您不需要在字符串中定义所有这些 SVG 元素属性，而是需要在代码中定义它们并将每个属性设置为属性。我创建了一个辅助函数，只要您将 SVG 元素的内容作为字符串传递给它，它就会为您完成此操作。这也意味着您只需将 <path> 元素保存为字符串，而不是将整个 svg 元素保存为字符串。 var tickPath = '<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/></svg>' var crossPath = '<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>' function createSvgEl(pathString){ const svg = document.createElementNS('http://www.w3.org/2000/svg', "svg"); svg.innerHTML = pathString svg.style.margin='0' //svg.style.flex='auto' svg.setAttribute("xmlns","http://www.w3.org/2000/svg"); svg.setAttribute("width", "16"); svg.setAttribute("height", "16"); svg.setAttribute("fill", "currentColor"); svg.setAttribute("class", "bi bi-check-square-fill"); svg.setAttribute("viewBox", "0 0 16 16"); return svg; } const fragment = document.createElement('span') fragment.style.display = 'flex' const l1 = document.createElement("label") l1.textContent = "HWjgvttgvyvytvhgvhgvhgvhtvytcytcytcytcytcyt"; l1.style.margin='0' //l1.style.flex='auto' fragment.appendChild(createSvgEl(tickPath)) fragment.appendChild(l1) document.body.appendChild(fragment);

将输入字段中的新值添加到 div，同时将旧输入保留在前一个 div 中

我希望能够从输入字段中提取值并将其添加到创建的 div 中，每次创建新的 div 时，它将采用新值，同时保留旧值。现在...

使用 document.createElement() 时如何保留标签大小写？

我需要动态地将一些标签插入到 的 元素中。有问题的标签具有驼峰命名的标签名称，并且还使用一些带有驼峰命名的属性。 当我...

从数组对象创建无序列表

我想使用 vanilla JS 创建一个无序列表，从对象数组中创建一个列表。不知道该怎么做。 这是我当前的代码： 让 myObj = [ {名称：《哈利·波特》，作者：“JK

如何向创建的元素添加内容？

所以我正在开发一个程序，允许您将书籍添加到列表中，然后为它们写评论。评论应该附加在它所属的列表项的下面，但是我...