Question

我想在JavaScript中移动HTML标记

我的HTML代码是：

<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>

我的JavaScript代码是：

...
    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>');
...

但是，它不起作用

Answer 1

您可以尝试运行此代码，关键是使用双引号来包装此字符〜

$('#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>

查看更多教程：https://github.com/AutumnsWind

Answer 2

<强> 1。使用innerHTML

使用innerHTML正在运行，但它实际上覆盖了您要定位的元素的所有子元素。如果元素是空的，我认为它完全正常。所以，正如Amitesh Kumar的回答：

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

<强> 2。使用appendChild

另一种方法实际上是使用appendChild方法，但您需要先将纯文本转换为DOM节点。一种方法是创建一个元素并使用plain字符串设置innerHTML。然后，使用现在是DOM元素的childNodes [0]属性将其附加到目标DOM对象。

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。使用jQuery

jQuery具有append功能，我认为该功能适用于您的情况。

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

参考：.append()

Answer 3

尝试这种方式：

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>';

如何在JavaScript中正确移动HTML标记？

3 个答案: