正文 

当前位置： 首页 > 源码 >

如何在 JavaScript 中使用 innerhtml？

     2023-05-07     28

关键词：

【中文标题】如何在 JavaScript 中使用 innerhtml？【英文标题】：How can I use innerhtml in JavaScript? 【发布时间】：2012-09-21 02:56:37 【问题描述】：

我的问题是我不知道如何显示我的表单的 innerhtml。

表单就像一个调查表，一旦你点击提交按钮，我回答的所有内容都会显示为一个摘要页面......

function displayResult() 
    var first = document.getElementById("first").value;

    var middle = document.getElementById("middle").value;

    var last = document.getElementById("last").value;

    alert("oh");
    var maincontent = document.getElementById("content").innerHTML;
    maincontent = "<p>" + first;

【问题讨论】：

首先我会去掉那个尾随的"。 查看 JSFiddle (jsfiddle.net) 并放一个 HTML 和 JS 示例，以便我们查看您正在使用的 DOM jsfiddle.net/8TtxV 在这里 :( element.innerHTML 是一个 property，具有 getter 和 setter。您无法将其作为节点引用，因为当您像var content = domelement.innerHTML; 一样直接调用它时，您得到它是字符串中的值，不是对它就像一个函数。因此，您必须将.innerHTML 传递到下一行并将其与节点引用一起使用。 @JaredFarrish 是的，现在我明白了。非常感谢你的帮助。 【参考方案1】： 
var maincontent = document.getElementById("content").innerHTML;
maincontent = "<p>" + first;

在第二行，您将覆盖变量，而不是设置 .innerHTML。这就是你想要的：

var maincontent = document.getElementById("content");
maincontent.innerHTML = "<p>" + first;

此外，您必须确保 ID 为“first”、“middle”和“last”的元素确实存在，否则可能会导致 TypeError。

【讨论】：

@ghie 确保你有一个 id 等于“content”的元素。像这样：id="content"。另外，确保 id 为“first”、“middle”和“last”的元素确实存在。 哦..我明白了。谢谢！我想我忘了 id 的东西-.- 谢谢！【参考方案2】：

试试这个：

但是，您应该首先拥有 id。 并且您应该在 html 部分中需要内容 div。

<script>
function displayResult() 
    var first = document.getElementById("first").value;

    var maincontent = "";
    maincontent = "<p>" + first + "</p>";
    document.getElementById("content").innerHTML = maincontent;


</script>
<body>
<input type="text" id="first" value="good">
<button onclick="displayResult();">Click me!!!</button>
<div id="content"></div>
</body>

【讨论】：

【参考方案3】：

而不是这个：

var maincontent = document.getElementById("content").innerHTML;
maincontent = "<p>" + first;`

试试这个：

document.getElementById("content").innerHTML = "<p>" + first;

您可能还想使用 .innerHTML 而不是 .value 来获得“第一”？我不确定“第一”是什么元素。

【讨论】：

谢谢！我已经尝试过了，但它没有显示任何内容:(你认为这有什么问题？对不起......我只是 javascript 的新手.. :(【参考方案4】：

你的 id 为 "contend" 的元素是什么，一个 div？ td？ tr?要么 ？应该是这样的

 <div id='content'> 
   </div>

然后这是javascript代码

document.getElementById("content").innerHTML = "<p>" + first + middle + last + "</p>"

【讨论】：

如何在 JavaScript 中使用可枚举

】如何在JavaScript中使用可枚举【英文标题】：Howtouseenumerablewithjavascript【发布时间】：2020-10-1823:35:12【问题描述】：我的Ignicoes类中有一个名为“Estado”的属性，该属性是可枚举类型。我的问题是，我将如何在javascript中引用它？... 查看详情

如何在 JavaScript 中使用 DCMTK 库

】如何在JavaScript中使用DCMTK库【英文标题】：HowtouseDCMTKlibrarywithjavascript【发布时间】：2016-07-1905:08:32【问题描述】：在C++中使用dcmtk后，我想在javascript中使用它，但我认为它不像使用C++那样容易。有什么办法吗？先感谢您。【... 查看详情

如何在 JavaScript 中使用它？

】如何在JavaScript中使用它？【英文标题】：HowtousethisinJavaScript?【发布时间】：2016-12-2607:38:25【问题描述】：在jQuery中我们使用：$("p").click(function()$(this).hide(););在上面的语句中this非常重要，因为它只隐藏了我们点击的那个p元素... 查看详情

如何在 JavaScript 中使用 xpath？ [复制]

】如何在JavaScript中使用xpath？[复制]【英文标题】：HowtousexpathinJavaScript?[duplicate]【发布时间】：2014-02-2809:43:33【问题描述】：要访问一个元素，我使用了以下命令document.getElementById(\'ghi\').innerHTML="Replacetheparagraghwiththistext"... 查看详情

如何在 JavaScript 文件中使用 Django 变量？

】如何在JavaScript文件中使用Django变量？【英文标题】：HowtouseDjangovariableinJavaScriptfile?【发布时间】：2016-08-0921:38:10【问题描述】：我知道我们可以通过variable在模板（html文件）中使用Django变量，但是如何在模板中包含的Javascript... 查看详情

如何在javascript中使用表达式查找'/'字符

】如何在javascript中使用表达式查找\\\'/\\\'字符【英文标题】：howtofind\'/\'characterusingexpressioninjavascript如何在javascript中使用表达式查找\'/\'字符【发布时间】：2016-05-0802:39:02【问题描述】：我想使用JavaScript和匹配函数从字符串\'ujj... 查看详情

你如何在 Javascript 中使用 onPageLoad？

】你如何在Javascript中使用onPageLoad？【英文标题】：HowdoyouuseonPageLoadinJavascript?【发布时间】：2010-10-2717:39:44【问题描述】：我尝试过使用onPageLoad:function()alert("hi");但它不会工作。我需要它作为Firefox扩展。有什么建议吗？【问题... 查看详情

如何在vuejs中优雅使用javascript各种插件

...不得不使使用js第三方库或者插件。如何在Vue项目中引入javascript第三方库 全局变量将JavaScript第三方库添加到项目中，最简单的办法是通过将其附加到 window 对象上，以使其成为全局变量。如何引入：window._=require(‘lod... 查看详情

如何在 jQuery 选择器中使用 JavaScript 变量？

】如何在jQuery选择器中使用JavaScript变量？【英文标题】：HowtouseJavaScriptvariablesinjQueryselectors?【发布时间】：2011-08-1900:13:12【问题描述】：如何在jQuery选择器中使用JavaScript变量作为参数？<scripttype="text/javascript">$(function()$("inpu... 查看详情

如何在 JavaScript 中使用文字引号？

】如何在JavaScript中使用文字引号？【英文标题】：HowdoIuseliteralquotesinJavaScript?【发布时间】：2018-04-0307:57:56【问题描述】：这是我的代码：constmyFunction=()=>letwinnerScreen="images/winner.png";letwinnerId="winnerScreen";document.getElementById("output 查看详情

如何使用 javascript 对象在属性中使用悬停？ [复制]

】如何使用javascript对象在属性中使用悬停？[复制]【英文标题】：Howcaniusehoverinattributeusingjavascriptobject?[duplicate]【发布时间】：2019-07-0812:19:15【问题描述】：constcustomPanelStyle=\'background-color\':\'red\',\'border\':\'1pxsolidgreen\',\':hover\'\' 查看详情

如何在 JavaScript 中获取 CPU 使用率？

】如何在JavaScript中获取CPU使用率？【英文标题】：HowtogetCPUusageinJavaScript?【发布时间】：2016-09-1517:22:29【问题描述】：有没有办法在浏览器的JavaScript中获取CPU使用率？【问题讨论】：提示重复的链接不存在了有一种方法可以在No... 查看详情

如何在 TypeScript / JavaScript 中使用角度材质主题颜色？

】如何在TypeScript/JavaScript中使用角度材质主题颜色？【英文标题】：HowtouseangularmaterialthemecolorinTypeScript/JavaScript?【发布时间】：2018-05-2706:12:02【问题描述】：我不知道如何获取主要主题颜色（AngularMaterial），例如component.ts。我可... 查看详情

如何在 SlickGrid 中使用 javascript 添加行

】如何在SlickGrid中使用javascript添加行【英文标题】：HowtoaddarowusingjavascriptinSlickGrid【发布时间】：2011-03-0610:24:02【问题描述】：我正在尝试使用javascript在我的页面上的光滑网格中添加一行。我现在能够做到的方式是使用以下代... 查看详情

如何在 Appium 中使用 javascript 单击 Xamarin 元素？

】如何在Appium中使用javascript单击Xamarin元素？【英文标题】：HowtoclickaXamarinelementwithjavascriptinAppium?【发布时间】：2021-09-0114:48:37【问题描述】：我觉得我有点发疯了。如何使用Appium在javascript中单击可访问性元素？我创建了一个Xam... 查看详情

如何在刀片花括号中使用 javascript 变量

】如何在刀片花括号中使用javascript变量【英文标题】：Howdoiuseajavascriptvariablewithinbladecurlybraces【发布时间】：2019-11-1418:04:42【问题描述】：我有一个视频播放器网站，我有一个“下一个”按钮，它应该停止视频，将src更改为指向... 查看详情

如何判断一个页面是不是在iframe中使用javascript？

】如何判断一个页面是不是在iframe中使用javascript？【英文标题】：howtojudgeapageisinaiframeusejavascript?如何判断一个页面是否在iframe中使用javascript？【发布时间】：2012-04-0315:16:21【问题描述】：我用javascript判断页面是否在iframe中：if... 查看详情

如何在 Java 中使用 JavaScript？ [关闭]

】如何在Java中使用JavaScript？[关闭]【英文标题】：HowcanIuseJavaScriptinJava?[closed]【发布时间】：2011-11-2105:18:59【问题描述】：我想构建一个小产品，我想在其中提供一种功能，用户可以在其中编写一种JavaScript脚本语言。并且还可... 查看详情