appedn可以同时插入图片和文字吗

源自：3-1 DOM内部插入append()与appendTo()

appedn可以同时插入图片和文字吗

var $content = $("#dc").val();//变量1 文本
var $jieshou = $("#main");//被插入的地方
$jieshou.append("<img src='icon/1.png'>" , "<p>"+":"+$content+"</p>");//表达式

问题来了，单独插入图片或者文本都可以实现，但是两者相加后就只能输入文字，不能同时输出文本加图片。有大佬解释一下为什么吗？

还是不能用append方法，

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/danmu.css">

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/animate.min.js"></script>

</head>
<body>
<script>
    $(document).ready(function () {
        $("#send1").click(function () {
            var pageH=parseInt($("#main").height());
            var $content = $("#dc").val();
            var $jieshou = $("#main");
           // var $img = $("#img2").html("<img src='icon/2.png'>");
           // $img.css({"width":"30px","height":"30px",});
            var _top=parseInt(Math.random()*pageH);
            $jieshou.append("<img src='icon/1.png'>" , "<p>"+":"+$content+"</p>");
            $("p:last-child").css({"top":_top,"color":"white",});
            $("p:last-child").animate({"left":"-200px"},8000);
            $("img:last-child").css({"width":"30px","height":"30px","top":_top});
            $("img:last-child").animate({"left":"-200px"},8000);

        })
        
    })
</script>

<div id="content">
    <div id="main">
        <p></p>
    </div>
    <div id="send">        
        <div id="co">
            <button id="open">开启弹幕</button>
            <button id="close">关闭弹幕</button>
        </div>
        <div id="danmu">
            <input type="text" placeholder="发个友好的弹幕" id="dc">
        </div>
        <div id="finish">
            <button id="send1">发送</button>
        </div>
    </div>
    
</div>
</body>
</html>

实现一个弹幕图片+文字的效果

提问者：慕慕0116261 2019-08-23 17:25

个回答

MWHx: 2019-08-30 14:36:23

已采纳

可以

$jieshou.append("<img src='icon/1.png'>" , "<p>"+":"+$content+"</p>");

$jieshou.append("<img src='icon/1.png'><p>"+":"+$content+"</p>");
直接连着写就行  亲测可以