Question

如何替换元素，然后将其附加到？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <style type="text/css"></style> 
        <script type="text/javascript"> 
            $(function(){

                //Appends as desired
                $('.dont-replace')
                .append($('<p/>', {'class': 'a'}))
                .append($('<p/>', {'class': 'b'}));

                //Replaces but doesn't append
                $('.replace-once')
                .replaceWith($('<div/>'))
                .append($('<p/>', {'class': 'a'}))
                .append($('<p/>', {'class': 'b'}));

                //Replaces but doesn't append
                $('.replace-once')
                .replaceWith($('<div/>')
                    .append($('<p/>', {'class': 'a'}))
                    .append($('<p/>', {'class': 'b'}))
                );

                //Replaces but doesn't append
                $('.replace-multiple').each(function() {
                    $(this).replaceWith($('<div/>'))
                    .append($('<p/>', {'class': 'a'}))
                    .append($('<p/>', {'class': 'b'}));
                })

                //Replaces but doesn't append
                $('.replace-multiple').each(function() {
                    $(this).replaceWith($('<div/>')
                        .append($('<p/>', {'class': 'a'}))
                        .append($('<p/>', {'class': 'b'}))
                    );
                })

                //No such thing as the replace method
                ($('<div/>'))
                .append($('<p/>', {'class': 'a'}))
                .append($('<p/>', {'class': 'b'}))
                .replace($('.replace-once2'));

            });
        </script>
    </head>

    <body>
        <span class="dont-replace"></span>
        <span class="replace-once"></span>
        <span class="replace-multiple"></span>
        <span class="replace-multiple"></span>
        <span class="replace-once2"></span>
    </body> 
</html>

Answer 1

在将传递给center方法之前，将子项追加到新的div元素：

.replaceWith()

$('.replace').replaceWith( $('<div/>') .append($('<p/>', {'text': 'a', 'class': 'a'})) .append($('<p/>', {'text': 'b', 'class': 'b'})) ); // Check the structure of the resulting HTML: console.log($(".container").html());

.a { background-color: red; } .b { background-color: yellow; }

（如果您只是在尝试<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <span class="replace">I will be replaced.</span> </div>之后链接.append()，那么您将附加到刚被替换的原始元素。）

Answer 2

我删除了之前的回答。在这种情况下。因为您正在使用.replaceWith（），所以它会从DOM中删除所有数据并再次添加。因此，当您尝试附加到已替换的内容时，它不起作用，因为它想要引用不起作用的原始DOM元素。如果您希望使用replace，那么您将不得不使用委派。

Read the .replaceWith() documentation

使用jQuery附加到替换元素

2 个答案: