innerHTML是DOM节点的属性，用于获取或设置HTML元素的内部HTML代码。它通常用于Javascript中以动态更改或从页面读取。
如何在element.innerHTML中正确使用三元运算符？ el.innerHTML = { `标题 ${菜单打开&& ` 已打开 如何在element.innerHTML中正确使用三元运算符？ el.innerHTML = { `<span>title</span> ${menuOpened && `<div> <span>opened</span> </div>` } ` } 我认为你不能在另一个`内部字符串模板中使用字符串模板。我可能是错的，但我会使用其他引用来解决它。 el = {}; menuOpened = true el.innerHTML = `<span>title</span> ${menuOpened && '<div><span>opened</span></div>' } `; console.log(el) 当然，您可以在单行模板中完成此操作，但为了代码的可读性，您可以以经典方式将其拆分为多个步骤，请检查内联注释： // Set your must have html let html = `<span>title</span>`; // Pre-set condition for example purpose const menuOpened = true; // Append html if condition is true if(menuOpened) html += `<div><span>opened</span></div>`; // Then inner html // For now we'll just console log it console.log(html); 但是如果您有更复杂的 html 并且需要插入数据，而不是像您的情况那样添加数据，那么： // Pre-set condition for example purpose const menuOpened = true; // Set code for menu const menu = menuOpened ? `<div><span>opened</span></div>` : ''; // Set your html template const html = `<div><span>title</span>${menu}</div>`; // Then inner html // For now we'll just console log it console.log(html);
使用 .innerHTML 创建元素时，会绕过 HTML 表单字段验证
当在其上放置了标准 HTML 验证约束的表单字段（在本例中为模式和必需）通过 .innerHTML 属性插入到 DOM 中时，该字段不会验证...
我想访问子组件中的[innerHTML] 大家好 我在下面的字段中的组件中有一个名为“联系我们”的组件。 ``... 我想访问子组件中的[innerHTML] 大家好 我在下面的字段中有一个名为“联系我们”的组件。 `<div [innerHTML] = "legaContent.disclaimer"></div>` 我在另一个组件中调用这个组件。但问题是，innerHTML 值没有在我的子组件中显示。 谁能帮我解决这个问题。 为了安全，Angular 会阻止您想要在 innerHTML 中设置的一些 html 内容。您可以将 DomSanitizer 与管道一起使用： 定制管道 @Pipe({name: 'safeHtml'}) export class Safe { constructor(private sanitizer:DomSanitizer){} transform(style) { return this.sanitizer.bypassSecurityTrustHtml(style); //return this.sanitizer.bypassSecurityTrustStyle(style); // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs } } 然后像这样使用它： <div [innerHTML] = "legaContent.disclaimer | safeHtml"></div> 现在您应该看到内容了。
如何使用querySelectorAll forEach更改元素的innerHTML
我正在使用此脚本将 p 标签更改为 i 标签。 有 2 个带有 .account-link-toggle 类的元素，但控制台显示节点列表中有 3 个元素。他们都没有更新。 有什么建议吗...
React - 如何在 HTMLElement ref 中渲染组件？
给定一个由 React.useRef() 创建的 HTMLElement 引用，是否可以在其中渲染一个新的组件？ 例如： const DemoComponent: React.FunctionComponent = () => { const ref = 反应....
最初我让这段代码工作，但后来我决定不要每次都动态创建表，而只是需要在表中填充的文本。我不知道这是不是...
如何显示输入表单的值以及使用 javascript 从这些值计算出的值？
我目前正在为我正在旁听的课程进行练习，我应该制作一个表格，用户输入三个数字，然后将这些数字相加、平均和相乘。之后...
使用 JavaScript 更改元素的 `innerHTML`
好的，我是 JavaScript 新手，但我正在尝试更改 div 元素的innerHTML。 这是我的脚本不起作用： 函数 var1...</desc> <question vote="24"> <p>好的，我是 JavaScript 新手，但我正在尝试更改 <pre><code>innerHTML</code></pre> 元素的 <pre><code>div</code></pre>。 这是我的脚本不起作用：</p> <pre><code><head> <script type="text/javascript"> function var1() { document.getElementById('test').innerHTML = 'hi'; } window.onLoad = var1(); </script> </head> <body> <div id="test">change</div> </body> </code></pre> <p>它应该可以工作，但由于某种原因没有，有什么帮助吗？</p> </question> <answer tick="true" vote="28"> <p>您当前正在调用该函数并存储其结果，而不是将 <pre><code>var1</code></pre> 分配给 <pre><code>window.onload</code></pre>。另外，这可能是显而易见的，但 <pre><code>var1</code></pre> 似乎是一个奇怪的函数名称。试试这个：</p> <pre><code>function var1() { document.getElementById('text').innerHTML = 'hi'; } window.onload = var1; </code></pre> <p>注意 <pre><code>onload</code></pre> 的大小写，以及 <pre><code>var1</code></pre> 后面缺少的括号。</p> </answer> <answer tick="false" vote="6"> <p>正确的是：</p> <pre><code>window.onload = var1; </code></pre> <p>在您的示例中，<pre><code>window.onload</code></pre>的值是<pre><code>undefined</code></pre>，因为函数调用<pre><code>var1()</code></pre>不返回任何内容（<pre><code>undefined</code></pre>）。 相反，您应该将 <pre><code>onload</code></pre> 属性设置为函数（指针）<pre><code>var1</code></pre>。</p> </answer> <answer tick="false" vote="5"> <p>使用 <pre><code>.innerHTML</code></pre> 是 <a href="http://domscripting.com/blog/display/35" rel="nofollow noreferrer">非标准，</a> 并且出于多种原因是一种糟糕的做法。您应该使用正确的标准方法创建一个新元素，并将其添加到树中您想要的位置。</p> </answer> <answer tick="false" vote="3"> <p>下面是另一个更简单的版本</p> <p></p><div data-console="true" data-lang="js" data-hide="false"> <div> <pre><code><body> <div id="test">change</div> <script type="text/javascript"> document.getElementById('test').innerHTML = 'hi'; </script> </body></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>您得到一个 id 为“test”的元素，但 html 中没有具有该 id 的元素。然而，有一种叫做“文本”。</p> </answer> <answer tick="false" vote="1"> <p>如果您在“onLoad”中将大写“L”更改为小写“L”，并删除当前 <pre><code>var1</code></pre><pre> 后面的括号，则您的示例将起作用 </pre> </p> </answer>尝试将 <answer tick="false" vote="0"><code>window.onLoad = var1();</code><p> 更改为 <pre><code>onLoad</code></pre> 并删除 <pre><code>onload</code></pre> 之后的括号 <pre><code>()</code></pre>：<pre> </pre><code>var1</code></p> <pre> </pre></answer>
有一个innerHTML和toLocaleDateString工作但现在只工作1
非常感谢对此的任何帮助。我在 learn.thebigbiemethod.com 上有这个代码，在底部我有它，因为我们对每个队列进行滚动注册，以在下周一（星期二）显示......
我有一个 xml 字符串，想使用innerHTML 将其打印在 UI 上。 当使用innerHTML打印它时，它被转换为一些随机字符串。我想用 innnerHT 在 UI 上打印相同的字符串...
我有一个 renderWorkoutUpdated 函数，它接受具有更新值的对象，其目的是用更新的记录替换特定的锻炼记录。 _renderWorkout更新(
在不发送 get 请求的情况下模拟 hx-swap 的安全方法？
我有一个标头，当用户单击它时，它会发送一个请求以获取一些社交媒体链接 我有一个标头，当用户单击它时，它会发送一个请求以获取一些社交媒体链接 <h3 class='header1' hx-get="/social" hx-swap="outerHTML" hx-target="#content_div" >My Social</h3> 该请求随后将当前的 content_div 替换为 <div id="content_div"> <div class="Socials"> <a href="https://stackoverflow.com/users/blah/blah"><font color="#007cc4"><i class="fab fa-stack-overflow"></i></font></a> <a href="https://github.com/blah"><font color="#007cc4"><i class="fab fa-github"></i></font></a> <a href="https://www.linkedin.com/in/blah-blah-blah/"><font color="#007cc4"><i class="fab fa-linkedin"></i></font></a> </div> </div> 我喜欢这个功能，但我不喜欢我必须执行 GET 请求才能执行此操作，因为 socials div 很小并且不需要任何后端数据。我可以使用 innerHTML 属性通过一些 javascript 来完成此操作： <h3 class='header1' hx-on:click="document.getElementById('content_div').innerHTML = document.getElementById('socials').innerHTML;">My Socials</h3> <div id='socials' style="display:none"> <div class="Social-media fade-in"> <a href="https://stackoverflow.com/users/4231985/kkawabat" target="_blank"><i class="fab fa-stack-overflow"></i></a> <a href="https://github.com/kkawabat" target="_blank"><i class="fab fa-github"></i></a> <a href="https://www.linkedin.com/in/kan-kawabata-8b4106a2/" target="_blank"><i class="fab fa-linkedin"></i></a> </div> </div> 但是使用 innerHTML 可能会带来 安全问题。 总之，如何获得与第一行代码相同的结果，但没有不必要的服务器请求？ 尝试直接克隆节点。也许： document.getElementById('content_div').replaceChildren(...document.getElementById('socials').cloneNode(true).childNodes); 如果您使用 HTML template 元素，则可以使用稍微更简洁的版本，该元素是为此类场景设计的： document.getElementById('content_div').replaceChildren(document.getElementById('socials').content.cloneNode(true)); <template id='socials'> <div class="Social-media fade-in"> <a href="https://stackoverflow.com/users/4231985/kkawabat" target="_blank"><i class="fab fa-stack-overflow"></i></a> <a href="https://github.com/kkawabat" target="_blank"><i class="fab fa-github"></i></a> <a href="https://www.linkedin.com/in/kan-kawabata-8b4106a2/" target="_blank"><i class="fab fa-linkedin"></i></a> </div> </template>
我想在 div 元素的 innerHTML 更改时触发一个函数。 已使用 element.addEventListener('DOMCharacterDataModified', myFunction()); 进行测试但它似乎不能正常工作。它
从 JavaScript 和 CSS 的下拉列表中选择值时，如何在 InnerHTML 中包含空格？
如何将空格包含到 InnerHTML 的值中？ 所以我从下拉列表中选择一个值，将数组列表作为我的 JS 文件中的常量。 const AppleList = ['iPhone 6s' , 'iPhone...
我正在尝试在 vue 中使用 innerHTML。但得到错误：捕获（承诺）TypeError：无法设置 null 的属性（设置“innerHTML”） 这是我在 App.vue 中的代码： 数据 （） { 返回 { } }, 山...
Angular 15 中的 innerHtml 无法正确显示 html 表每一列中的<tr><td> 数据
我正在尝试用在字符串中解析的数据（我从 http 请求中获得）填充 html 表。就像带有数据的字符串包含 / 标记一样，我正在尝试呈现它们......
为什么这个 InnerHtml 返回与 innerText 相同的输出
（初学者）下面的代码（不包括 css）显示相同的输出。但是 innerHtml 应该给出带有 html 标签的输出吗？ HTML （初学者）下面的代码（不包括 css）显示相同的输出。但是 innerHtml 应该给出带有 html 标签的输出吧？ HTML <div class="sunpath"> <div class="sun"> SUN </div> <div class="planet"> <div class="stable"> Planet </div> </div> </div> Javascript p = document.querySelector(".sun"); console.log(p.innerHTML); console.log(p.innerText); 在控制台（firefox）中都提供相同的输出 你是对的兄弟： 因为你正在访问父标签： 如果你这样做了 <div class="sun"><p> SUN </p></div> 那么标签也将是控制台
需要帮助解决一个被点击但未被点击的按钮的 javascript 问题
好的，所以我有一个正在设计的 Web 界面，但我遇到了问题。它是配置遥控器以控制 ESP32 功能的界面。 ESP32上的code绝对不是pr...
如何在单击按钮后附加图像并在 JS 中的容器中每隔一次单击将其删除？
我正在尝试创建一个蘑菇日志，在按下不同的按钮后，容器中会填充一组独特的图像。 单击第一个按钮后会出现一个图像，但它不会...
当我选择 html 文档的一个元素，然后将其转换为 int64 时，它缺少前面的 0，这个 newz790 var 的结果应该是 0812，但我只得到 812。 我正在使用 InnerHtml[^4..] b...