JavaScript输出HTML

Question

JavaScript输出HTML

5

我想知道是否有人能帮我解决一个简单的代码问题，我正在尝试制作一个“cookie政策”横幅，让它出现在网页顶部（点击同意等）。我已经成功编写了PHP部分，并且它可以生成和检测Cookie政策是否被同意，但是我在使用JS片段将横幅加载到页面顶部时遇到了问题。

以下是我用来显示框和示例的代码。该代码可以正常显示超链接或文本（如下所示），但如果我尝试添加任何其他类型的HTML，例如一个简单的表格，它就无法正常工作。

<table>
  <tr>
    <td>Test</td>
    <td>Table </td>
  </tr>
</table>

抱歉，更新的作品与超链接有关。

<script type="text/javascript">
function changeText()
{
     document.getElementById("new_coder").innerHTML = '<a href="#">sdsd</a>';
}
</script>
<b id='new_coder'>Good Bye World</b>
<input type='button'  value='Change Text'/>

我想要做的是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function changeText()
{
     document.getElementById("new_coder").innerHTML = '<table>
  <tr>
    <td>Test</td>
    <td>Table </td>
  </tr>
</table>';
}
</script>
<b id='new_coder'>Good Bye World</b>
<input type='button' onclick='changeText()' value='Change Text'/>
<body>
</body>
</html>

有没有更好的函数可以通过JavaScript将HTML片段加载到页面中。对不起，我在这个领域有点模糊。

谢谢Debs

- Debra Medien

1

请展示那些不能工作的代码，而不是那些能够工作的代码。 - JJJ

看起来你的 <table> 标签在 <body> 标签外面。另外，没有一个 id 为 changearea 的元素。 - Shawn Northrop

在提供HTML/CSS/JavaScript的简单实时演示方面（如有需要，包括库）：[JS Fiddle]（http://jsfiddle.net/），[JS Bin]（http://jsbin.com/），[Dabblet]（http://dabblet.com/）和[codepen]（http://codepen.io/）（等等）。对于服务器端类型，有[codepad]（http://codepad.org/）。 - David Thomas

字符串中不能有换行符。请将其删除并将 HTML 写在一行中 ('<table><tr><td>...')。 - JJJ

2个回答

-2

我建议使用jQuery。这样，您可以编写类似于以下内容的代码片段。

$(document).ready(function() {
    $('#changearea').html('<a href="#">Hyperlink</a>');
});

它更加简洁，应该可以在所有浏览器上运行。

- mzedeler

谢谢。之前我使用的是在这里找到的一个jQuery示例，但它在加载时会渲染85kb，我想要一个更加简化的脚本。正如GTmetrix所显示的那样，我的页面上有太多的JS。 - Debra Medien

.html()的参数与.innerHTML接受的参数相同。如果.innerHTML无法正常工作，那么.html()也无法正常工作。 - JJJ

@Juhana：从源代码来看，它执行一些我真的很高兴不必理解的技巧。我相信使用抽象库的整个重点就在于消除不同浏览器之间的差异，但你引起了我的兴趣。你能解释一下"typeof value ===“string” && !rnoInnerhtml.test( value ) && ( jQuery.support.htmlSerialize || !rnoshimcache.test( value ) ) && ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) && !wrapMap[ ( rtagName.exec( value ) || [“”, “”] )[1].toLowerCase() ]"是什么吗？ - mzedeler

@Debra：是的 - jQuery大约占用85kb，但许多网站仍在使用它。如果您使用常见的CDN，当用户访问您的页面时，它很可能已经被另一个页面缓存到浏览器中了。 - mzedeler

我并不是说方法相同，而是说参数相同。OP说innerHTML可以用于超链接但不能用于表格。如果是这样的话，问题就在于她如何编写字符串（正如在编辑后的问题中所看到的）。使用jQuery无法解决问题---在任何情况下该字符串都是无效的。 - JJJ

很抱歉误读了你的评论。我的意见是，开始使用客户端JavaScript需要使用类似jQuery的库，就像很少有人在高级编程之前从汇编语言开始写作一样。这个问题中有一个短语“是否有更好的方法将HTML片段加载到Web页面上”，这触发了我的jQuery反应 :) - mzedeler

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- raam86 · Accepted Answer

您遇到了JavaScript的一个怪异行为。

JS具有自动分号插入功能，它会在换行符处插入分号。

如果您像这样编写函数：

JSfiddle

function changeText()
{
     document.getElementById("new_coder").innerHTML = "<table><tr><td>Test</td><td>Table </td></tr></table>";
}

这会起作用。

注意代码中没有换行符

按F12并查看控制台，您可以得到一些线索。

Uncaught SyntaxError: Unexpected token <

就在你断行的位置附近。