How to move HTML tag inside JavaScript correctly?

Question

I want move HTML tag inside JavaScript

My HTML Code is:

<tr>
...

    <td><a href="#" onclick="window.open('{{ url('hotel/cancel-policy?NationCd='.$hotel_request['NationCd'].'&CityCd='.$hotel_request['CityCd'].'&CheckIn='.$hotel_request['CheckIn'].'&CheckOut='.$hotel_request['CheckOut'].'&Sgl='.$hotel_request['Sgl'].'&Dbl='.$hotel_request['Dbl']) }}', 'newwindow', 'width=300, height=250'); return false;">Cancel Policy</a></td>    
...

</tr>

My JavaScript Code is:

...
    elem.append('<tr>\
...
        <td><a href="#" onclick="window.open('url('hotel/cancel-policy?NationCd='+NationCd+'&CityCd='+CityCd+'&CheckIn='+CheckIn+'&CheckOut='+CheckOut+'&Sgl='+Sgl+'&Dbl='+Dbl)', 'newwindow', 'width=300, height=250'); return false;">Cancel Policy</a></td>\
...
    </tr>');
...

But, it's not working

@geckob, var elem = $parent.find('.loading').empty();. How to move html tag(link href) inside javascript? It looks like it's just a matter of writing quotes. But I am confused — samuel toh
– samuel toh, Commented Jan 26, 2016 at 3:02
This wont work in plain js because append is expecting to receive the node object instead of a plain string. Using jQuery will works as it will convert the string to DOM element and append it — geckob
– geckob, Commented Jan 26, 2016 at 3:06

guradio · Accepted Answer · 2016-01-26 04:27:04Z

1

You can try to run this code, the key is to use double quotes to wrap this character~

$('#test').click(
  function() {
    $('#add').append('<tr><td><a href="#"' + 'onclick=' + "url('onclick=window.open('{{ url('hotel/cancel-policy?NationCd='.$hotel_request['NationCd'].'&CityCd='.$hotel_request['CityCd'].'&CheckIn='.$hotel_request['CheckIn'].'&CheckOut='.$hotel_request['CheckOut'].'&Sgl='.$hotel_request['Sgl'].'&Dbl='.$hotel_request['Dbl']) }}', 'newwindow', 'width=300, height=250'); return false;" + ')' + '>Cancel Policy</a></td></tr>');
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="add"></div>
<tr id="td">
  <td><a href="#" onclick="window.open('{{ url('hotel/cancel-policy?NationCd='.$hotel_request['NationCd'].'&CityCd='.$hotel_request['CityCd'].'&CheckIn='.$hotel_request['CheckIn'].'&CheckOut='.$hotel_request['CheckOut'].'&Sgl='.$hotel_request['Sgl'].'&Dbl='.$hotel_request['Dbl']) }}', 'newwindow', 'width=300, height=250'); return false;">Cancel Policy</a>
  </td>
</tr>
<button id="test">test</button>

See More Tutorials:https://github.com/AutumnsWind

edited Jan 26, 2016 at 4:27

guradio

15.6k4 gold badges39 silver badges64 bronze badges

answered Jan 26, 2016 at 3:08

wsc

9067 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

samuel toh Over a year ago

I need you help. Look here : stackoverflow.com/questions/37269200/…

geckob · Accepted Answer · 2016-01-26 04:29:51Z

1

1. Using innerHTML

Using innerHTML is working but it is actually overwriting all child elements of the element you are targeting. If the element is empty, it works perfectly fine I believe. So, as Amitesh Kumar answer:

var node = document.getElementById('node-id');
node.innerHTML = '<p>some dynamic html</p>';

2. Using appendChild

Another way is actually using the appendChild method but you need to convert the plain text to DOM nodes first. One way to do it is by creating an element and set the innerHTML using the plain string. Then, use the childNodes[0] property which is now a DOM element to append it to your targeted DOM object.

var el = document.getElementbyId('container')
var div = document.createElement('div');
div.innerHTML = '<p> This is the test element </p>';
el.appendChild(div.childNodes[0]);

3. Using jQuery

jQuery has append function which I believe should work in your case.

$( ".inner" ).append( "<p>Test</p>" );

Refer: .append()

edited Jan 26, 2016 at 4:29

answered Jan 26, 2016 at 3:10

geckob

8,2085 gold badges36 silver badges43 bronze badges

3 Comments

Jimbo Jonny Over a year ago

Why are you writing innerHTML as a function? That's gonna do nothing but throw errors.

geckob Over a year ago

@JimboJonny: Which part?

geckob Over a year ago

@JimboJonny: I get your mean. It was as mentioned Amitesh answer. So I copied paste just now without putting much attention to it. Now I fixed it.

Amitesh Kumar · Accepted Answer · 2016-01-26 04:04:21Z

0

try this way :

HTML into `<div id="node-id"></div>`



 Using innerHTML on a node:

    var node = document.getElementById('node-id');
    node.innerHTML= '<p>some dynamic html</p>';

edited Jan 26, 2016 at 4:04

answered Jan 26, 2016 at 2:46

Amitesh Kumar

3,0891 gold badge28 silver badges42 bronze badges

3 Comments

samuel toh Over a year ago

I find it difficult to implement it into my case. My case seems only to the writing quotes

Amitesh Kumar Over a year ago

you are making it so hard first try with simple examples , then go for hard one, i think you are newbie.

Jimbo Jonny Over a year ago

@AmiteshKumar - he might also be having a hard time with your example because innerHTML is supposed to be a property, not a method. node.innerHTML = '<p>content</p>';, not node.innerHTML('<p>content</p>');

Collectives™ on Stack Overflow

How to move HTML tag inside JavaScript correctly?

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related