将HTML元素的位置更改为另一个位置javascript

change HTML element place to another place javascript

本文关键字：位置 另一个 javascript 元素 HTML      更新时间：2023-12-04

我想通过JavaScript或jquery将img.fnone替换为span.ddlabel元素有什么功能可以做吗

  <span id="flat_title" class="ddTitleText ">
    <img class="fnone" src="images/pinc.png">
    <span class="ddlabel">A</span>
    <span class="description" style="display: none;"></span>
    </span>

使用append()

var targetSPAN=$('#flat_title');
var image=$('img.fnone', targetSPAN);
$('span.ddlabel', targetSPAN).append(image);

JSFIDDLE演示

<script type="text/javascript">
    $(document).ready(function () {
        $('span .ddlabel').append('<img class="fnone" src="images/pinc.png">');
        $('#flat_title img:first').remove()
    });
</script>

使用element.appendChild方法。

<span id="flat_title" class="ddTitleText ">
    <img class="fnone" src="images/pinc.png" />
    <span class="ddlabel">A</span>
    <span class="description" style="display: none;"></span>
</span>
<div>
    <button id="abc">Click to replace</button>
</div>
<script>
document.getElementById('abc').addEventListener('click',function(){
    var parent = document.getElementById('flat_title'),
    img = document.getElementsByClassName('fnone')[0],
    description = document.getElementsByClassName('description')[0];
    parent.appendChild(img);
    parent.appendChild(description);
})
</script>

打开它http://jsfiddle.net/fWK67/

使用html（）

var html=$("img.fnone").html();
$("span.ddlabel").html(html);
$("img.fnone").remove();
相关文章：