javascriptconcatenationappendchildcreatetextnode

text+variable concatenation as string inside appendChild($variable) with pure javascript


I know zero javascript. I achieved most of my requirements by converting & combining little scripts. however at the point I described below I couldn't solve my requirement totally.

I want to print the value of the hyperlink id before my constant text also. I don't use jquery.

For example for the time being it's only writing "is being replied by the time being."

However (assume hyperlink id = 6) it should write "6 is being replied by the time being."

I've read this SO Q&A but I couldn't benefit from it. (JS: How to concatenate variables inside appendChild()?)

DEMO FOR THE CURRENT STATE @JSFIDDLE

JS in body tags

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>

Solution

  • to me it looks like you never added the LinkId.value = id to your 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();
    }
    

    Fiddle: http://jsfiddle.net/fiddle_me_this/nc43vypp/5/

    All i did was add id + in from of " is being replied by the time being."

    In order to concatenate you just use the + operator. You can concat lots of things. Example: var string = "MY " + "CONCATENATED " + " STRING"; will output "MY CONCATENATED STRING". And so on.