在HTML

Question

您好我正在尝试使用JS中定义的var字符串动态设置html5主体的一些内容。

下面是我到目前为止所写的内容，它似乎没有显示指定的值。

<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body> 

<script>
    var name = "John Smith";
</script>

<div data-role="page" id="page">
    <div data-role="header">
    <button></button>
        <h1>New Claim</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
    <li> <p><h3>Your Name: <var>name</var></h3></p></li>

        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>


</body>

我正在尝试将John Smith插入“你的名字：文字。

由于

Answer 1

您必须使用JavaScript将变量的内容“打印”到HTML源。这是一个例子：

<div id="test"></div>
document.getElementById('test').innerHTML = 'This goes into the element!';

但是既然你正在使用jQuery，你也可以这样做：

$('#test').text('This goes into the element!');

Answer 2

您应该自己提供VAR-Tag，或者将LI-Tag包装为唯一的ID。

在HTML

中

<li>
    <p>
          <h3>Your Name: <var id="name">name</var></h3>
    </p>
</li>

的JavaScript

var name = "John Smith";
$("#name").text(name);

顺便说一下：

你不应该在一个段落中嵌入一个标题，这没有任何意义。段落是INLINE，而标题是BLOCKELEMENTS。

Check out this FIDDLE

Answer 3

你可能想要下面这样的东西。分配全局JS变量，使用VAR html5标记引用它们，在body的末尾（或在DOM加载之后）使用JS将VAR标记中的键替换为全局VARS对象中保存的值。

<script>
    VARS = {};
    VARS.name = "John Smith";
    VARS.age = 45;
</script>
...
Name : <var>name</var><br/>
Age : <var>age</var>
...
<script>
    // run once at end of body
    var all = document.getElementsByTagName("var");
    for(var i=0; i<all.length; i++) {
        var elm = all[i];
        var key = elm.innerHTML;
        if(VARS[key] != null)
            elm.innerHTML = VARS[key];
        else
            elm.innerHTML = "";
    }
</script>

Answer 4

标签不应该以这种方式使用试试这个：

<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body> 

<script>
    var name = "John Smith";

    $(document).ready(function() {
  $("#name").text(name);
});

</script>


<div data-role="page" id="page">
    <div data-role="header">
    <button></button>
        <h1>New Claim</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
    <li> <p><h3>Your Name: <span id="name"></span></h3></p></li>

        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</body>

编辑：只是澄清一件事。标签不应该用于将位置保存到变量的值。当您在页面上显示某些代码时，正确的语义意义更多地表示数学变量或编程变量。如果我在这里错了，请有人纠正我。

Answer 5

试试这个

$(document).ready(function() {
  $("h3").text("Your name : John Smith");
});

在你的div上添加一些类，以便轻松选择好的标签

在html5体中动态设置变量？

5 个答案:

在HTML

的JavaScript

顺便说一下：

Check out this FIDDLE