纯javascript的appendChild($variable)中的文本+变量连接作为字符串

Posted 2023-05-07

【中文标题】纯javascript的appendChild($variable)中的文本+变量连接作为字符串

【英文标题】：text+variable concatenation as string inside appendChild($variable) with pure javascript

【发布时间】：2015-03-29 00:26:35

【问题描述】：

我知道零 javascript。我通过转换和组合小脚本实现了我的大部分要求。但是在我下面描述的点上，我无法完全解决我的要求。

我还想在常量文本之前打印超链接 ID 的值。 我不使用 jquery。

例如暂时只写“暂时回复中。”

但是（假设超链接 id = 6）它应该写成“6 暂时正在回复。”

我已阅读此 SO Q&A，但无法从中受益。 (JS: How to concatenate variables inside appendChild()?)

DEMO FOR THE CURRENT STATE @JSFIDDLE

正文标签中的 JS

function reply_comment (id) 
    var LinkId = document.getElementById('parent_id');    
    LinkId.value = id;
    var message = document.createTextNode(" is being replied by the time being.");
    document.getElementById('print_id').appendChild(message);
    document.getElementById("focus_id").focus();

HTML

<!-- codes given above -->
<script type="text/javascript">
... ... ...
</script>
<!-- codes given above -->

<!-- when clicked on the hyperlink, store the hyperlink id value (id value is an unsigned integer)  -->
<!-- print the stored id from hyperlink into the value="unsigned integer id" part of input ( type:text and id="parent_id" )-->
<!-- focus on comment form's input ( type:text and id="focus_id" )  -->
<!-- print preset message between span tags ( span tag id="print_id"  ) -->


<a class="rep"  href="#focus_id" onclick="reply_comment(this.id);" id="6" rel="nofollow">reply comment</a>
<p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p><p>filling words</p>
<span id="print_id"></span>
<form>
    <label for="focus_id">Focus the cursor below</label>
    <input  type="text" id="focus_id" name="focus_id">
    <label for="parent_id">Paste parent_id below</label>
    <input  type="text" id="parent_id" name="parent_id" value="">
</form>

【参考方案1】：

在我看来，您似乎从未将LinkId.value = id 添加到您的message：

function reply_comment (id) 
    var LinkId = document.getElementById('parent_id');    
    LinkId.value = id;
    var message = document.createTextNode(id + " is being replied by the time being.");
    document.getElementById('print_id').appendChild(message);
    document.getElementById("focus_id").focus();

小提琴：http://jsfiddle.net/fiddle_me_this/nc43vypp/5/

我所做的只是在" is being replied by the time being." 中添加id +

为了连接您只需使用+ 运算符。你可以连接很多东西。示例：var string = "MY " + "CONCATENATED " + " STRING"; 将输出 "MY CONCATENATED STRING"。以此类推。

【讨论】：

正如我所说，我对 JS 一无所知 :) 谢谢