innerHTML是DOM节点的属性，用于获取或设置HTML元素的内部HTML代码。它通常用于Javascript中以动态更改或从页面读取。
<br> 在 ios/ipados 上更新 innerHTML 时被忽略
[编辑：我找到了一个简单的解决方法，它位于下面的解决方案中] 我最近向Apple报告，更新到IPADOS 17.2后，Safari在更新innerH时忽略了标签...
如何选择文本字段元素“member-name”？ 函数 RevealPaywall (){ const paywall = document.getElementById('paywall') const name = localStorage.getItem("value")...
在JavaScript中，我一直在尝试创建一个函数，将段落元素的innerHTML设置为本地.txt文件的内容。所以我想将文件中的文本提取到...
如何在我的待办事项列表中显示已编辑的innerHTML 元素？
我已经编写了一个任务待办事项列表，可以删除或编辑该列表以在输入文本字段中进行修改。但是，一旦在输入文本字段中进行编辑以进行修改，我就无法获得新的...
我正在使用这个脚本来保存innerHTML： 函数 downloadInnerHtml1(文件名, elId, mimeType) { var elHtml = document.getElementById(elId).innerHTML; var link = document.createElement('a'...
Javascript insideText 添加两个 用户按下的每个回车键
在我的 Angular 项目中，我有一个文本区域，从中读取innerHTML并向用户显示剩余的字符数 从同一个文本区域，我通过innerText读取文本并使用le发送到服务器...
我的目标是打开一个空白浏览器选项卡并通过innerHTML 使用.html 代码填充它。我在第一个实例上成功了，但在第二个实例（及此后）上，打开了空白选项卡，但“inne...
使用javascript将innerHTML转换为自定义json
这是我从网页上的文本编辑器获得的innerHTML 示例，用户可以在其中编写文本并添加图像、视频和音频。 这是一个测试 <question vote="0"> <p>这是我从网页上的文本编辑器获得的innerHTML 示例，用户可以在其中编写文本并添加图像、视频和音频。</p> <pre><code><p>This is a<br>test</p> <p><iframe width="560" height="315" src="https://www.youtube.com/embed/12345" frameborder="0" allowfullscreen=""></iframe></p> <p><audio controls><source src="https://www.test.com/123/456/example.mp3"/></audio></p> <p>end of test</p> </code></pre> <p>我保存了innerHTML，这样我就可以重新加载用户在编辑器中编写的内容，但我还需要将这些信息格式化为json结构，如下所示：</p> <pre><code>{ "page1": { contents: [ {"text":"This is a test"}, {"video":"https://www.youtube.com/embed/12345"}, {"audio":"https://www.test.com/123/456/example.mp3"}, {"text":"end of test"} ] } } </code></pre> <p>此 json 应发送到后端并保存，以便移动应用程序可以请求这些信息并以自定义方式显示它们。维持元素的顺序至关重要。</p> <p>那么，我如何从javascript中的innerHTML获取上述结构呢？我快被它搞疯了</p> </question> <answer tick="true" vote="1"> <p>希望这能给您一个基本的想法：</p> <p>1）您需要为开始文本和结束文本选择不同的键，例如 start_text 和 end_text。</p> <p>2）创建一个虚拟 DOM 元素并将您的innerHTML字符串存储在DOM元素的innerHTML中。这将帮助您访问 DOM 方法，并且您可以实现您想要的。 例如：</p> <pre><code>var content = '(innerHTML content)'; var d = document.createElement("DIV"); d.innerHTML = content; var p_tags = d.querySelectorAll("p"); </code></pre> <p>3）创建您喜欢的对象结构。 例如：</p> <pre><code>var final_content = {}; final_content["page_1"] = {}; final_content["page_1"]["content"] = []; final_content["page_1"]["content"].push({"start_text":""}); </code></pre> <p>4）最后，您可以使用 JSON.stringify(final_content) 将对象转换为 JSON 字符串。</p> </answer> <answer tick="false" vote="0"> <p>如果格式始终不变，您可以尝试将 <pre><code>innerHTML</code></pre> 转换为字符串，然后用 <pre><code></p></code></pre> 分割。这将创建一个包含 4 个元素的数组。循环遍历每个元素。对于字符串，可以使用 <pre><code>string.replace("<p>","")</code></pre> 轻松地从字符串中剥离标签。对于更复杂的 <pre><code>iframe</code></pre> 和 <pre><code>audio</code></pre> 标签，请使用此正则表达式 <pre><code>"(https.*?)"</code></pre>。它将返回 src url。然后使用这些值创建对象。 这是一些快速的伪代码：</p> <pre><code>var aHtml = JSON.stringify(element.innerHTML).split('</p>'); var result = []; aHtml.forEach(function(item, idx, arr){ // run regex against it, grab matching element var match = item.match(/"(https.*?)"/,"g"); if(match){ var url = match[1]; // the url if(match[0].indexOf('audio')> -1){ result.push({audio: url}); }else{ result.push({video: url}); } }else{ var str = item.replace(/(<p>|<br>)/g, " "); result.push({text: str}); } }) console.log(result); </code></pre> </answer> </body></html>
我希望在用户单击按钮后使用 getusermedia 显示 html 视频（使用网络摄像头捕获）。视频标签将使用innerhtml 显示。 当用户单击按钮时，视频将显示...
未捕获类型错误：无法读取 null 的属性“innerHTML”
谁能解释一下这个错误是什么？ 未捕获的类型错误：无法读取 null 的属性“innerHTML” 这是导致问题的行： var idPost=document.getElementById("状态&qu...
未捕获类型错误：无法访问属性“innerHTML”，容器为空
我有以下名为index.html的HTML文件： 我有以下名为 index.html 的 HTML 文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Components test</title> <script src="/script.js"></script> </head> <body> <h1>All reviews:</h1> <div id="CK-reviews"></div> <h1>All users:</h1> <div id="CK-users"></div> <h1>Search Users</h1> <div id="CK-search"></div> </body> </html> 脚本文件名为 script.js: // Fetch calls for data const get = async (id, filters, url) => { const encodedFilters = btoa (JSON.stringify (filters)) const rawResponse = await fetch (url, {headers: { "id": id, "filters": encodedFilters }}) const response = await rawResponse.json() return response } const post = async (createData, url) => { const rawResponse = await fetch (url, {body: JSON.stringify (createData)}) const response = await rawResponse.json() return response } // Inject data into correct divs const injectReviews = async () => { const data = await get ("655643cd1c82275babfaf859", {title: "Thank you"}, "http://localhost:3000/api/reviews/add") const reviews = data.reviews const reviewsContainer = document.getElementById("CK-reviews") let injectHtml = "" for (let i = 0; i < reviews.length; i++) { injectHtml += ` <div class="CK-review"> <h1 class="CK-review-title">${reviews[i].title}</h1> <b>${reviews[i].stars}</b> <p class="CK-search-text">${reviews[i].text}</p> </div>` } reviewsContainer.innerHTML += injectHtml } const injectUser = async () => { const data = await get ("64e15d2329617fb0163de018", {}, "http://localhost:3000/api/user") const users = data.user const usersContainer = document.getElementById("CK-users") let injectHtml = "" for (let i = 0; i < users.length; i++) { injectHtml += ` <div class="CK-user"> <h1 class="CK-user-name">${users[i].name}</h1> </div>` } usersContainer.innerHTML += injectHtml } const injectSearch = () => { const searchContainer = document.getElementById("CK-search") searchContainer.innerHTML = `<input type="text" placeholder="Search for anyone"/>` } injectReviews() injectUser() injectSearch() 问题出在注入搜索功能中，我收到错误： Uncaught TypeError: can't access property "innerHTML", searchContainer is null injectSearch http://localhost:5500/script.js:70 <anonymous> http://localhost:5500/script.js:76 script.js:70:5 injectSearch http://localhost:5500/script.js:70 <anonymous> http://localhost:5500/script.js:76 发生什么事了？该元素确实存在。当尝试访问函数内的其他元素时，我收到相同的错误。所有其他功能都有效。 可能是脚本在 dom 完成之前运行，请尝试在文档完全加载并准备好后运行脚本。 document.addEventListener("DOMContentLoaded", () => { injectReviews(); injectUser(); injectSearch(); });
我试图在通过向复选框添加事件侦听器函数来选中复选框时创建芯片，但它没有发生。我认为该元素没有被插入到 html 中。 这里...
我正在尝试将此代码添加到动态创建的 div 元素中 样式=“宽度：330px；浮动：左；” 创建动态div的代码是 var nFilter = document.createElement('div');
如何将此document.write转换为innerHTML？
我正在使用此脚本来输出帖子总数。 函数 mbhTotalCount(json) { var TotalCount = parseInt(json.feed.openSearch$totalResults.$t, 10); 文档.write (</desc> <question vote="0"> <p>我正在使用此脚本来输出帖子总数。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> function mbhTotalCount(json) { var totalCount = parseInt(json.feed.openSearch$totalResults.$t, 10); document.write (totalCount); } </script> <span class='count'> <script src="/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script> </span></code></pre> </div> </div> <p></p> <p>我们如何将其更改为替代形式？</p> </question> <answer tick="false" vote="0"> <p>只需将变量分配给跨度的 <pre><code>innerText</code></pre>。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> function mbhTotalCount(json) { var totalCount = parseInt(json.feed.openSearch$totalResults.$t, 10); document.getElementById("count").innerText = totalCount; } </script> <span class='count'> <script src="/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script> </span></code></pre> </div> </div> <p></p> </answer> </body></html>
未定义的类型不适用于 document.getelementbyId
使用计时器来检查对象是否已填充...但是，如果未定义它，我只想跳过该代码...但我似乎无法理解... 所以我有 if (typeof document.getElementsByClassName('ad-...
开发工具 -> 控制台 -> var x= document.getElementsByClassName('ad-area')[0].innerHTML; x 返回： ' 开发工具 -> 控制台 -> var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://test.gif"></a>' 如何获取src？ https://test.gif 所以像... var v = document.getElementById("x").src; 请问有什么帮助吗？ TY 一种方法是链接一个选择器以通过 TagName 抓取项目，然后读取 src 的属性。 const x = document .getElementsByClassName('ad-area')[0] .getElementsByTagName('img')[0] .getAttribute("src"); console.warn("x: ", x); // x: https://test.gif <div class="ad-area"> <a href=""><img src="https://test.gif"></a> </div>
如何使用响应式表单 Angular 的 html 标签显示内容
Component.html 组件.ts this.formName.patchValue({ 标题=这个.内容 }) 一些...
如何使用JavaScript删除带有类名的innerHTML li
我正在创建一个 Todo 应用程序，但我对 JavaScript 还很陌生，我在使用类删除已完成的任务时遇到问题 (todos)li.checked 在用户输入的innerHTML 中找到。 我正在创建一个 Todo 应用程序，我对 JavaScript 还很陌生，我在使用类删除已完成的任务时遇到问题 (todos)li.checked 在用户输入的innerHTML 中找到。 <div class="todo-container"> <ul class="todo-list"> */<li class="checked">completed task</li> <li>Uncompleted task</li>*/ </ul> </div> <div class="btn" onclick="deletecompletedTask()> deleteAll</div> JS const btn = document.querySelector(".btn"); const todoContainer = document.querySelector('.todo-container'); const todolist = document.querySelector('.todo-list); //Delete completed task function deletecompletedTask(){ todoContainer.innerhtml = document.getElementByClassName('checked'); todoContainer.removeChild(todoContainer.firstChild); } 解释 嗨，我认为要实现你想要的，你不应该设置innerhtml，而是使用删除功能。 这里对您的脚本进行了一些修改，它首先会查找类标记为 “checked” 的所有元素。然后，我们将使用 "forEach" 循环来删除所有它们。 HTML <div class="todo-container"> <ul class="todo-list"> */<li class="checked">completed task</li> <li>Uncompleted task</li>*/ </ul> </div> <button id="deleteBtn" class="btn"> deleteAll</button> Javascript // loop through all the .checked element and remove them function deletecompletedTask() { document.querySelectorAll(".checked").forEach(function(e) { e.remove(); }); } // add event listener to delete button let btn = document.getElementById("deleteBtn").addEventListener("click", function() { deletecompletedTask(); });
在下面随机选择选择器的代码片段中，将innerHTML 设置为空字符串到底能完成什么操作。我无法克服这样的歧义：这样做我们就清除了所有的孩子