问答详情
源自: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>");
    直接连着写就行  亲测可以

    https://img1.mukewang.com/5d68c3db00015c9c11360875.jpg