如何在div上添加图像和文本框单击按钮

Question

我想点击图片和文字框。我使用了一些代码，但它没有正常工作

$(function () {
    $('.plusicondiv').on('click', function () {
        
      
        var textBox = document.createElement("input");
        $("input").addClass("textbox")
        //$("input").addClass("textbox")
        
        $('.rose').append(textBox);

        $('.plusicondiv').on('click', function ()
        {alert("ss")
        var img = document.createElement("IMG");
        $("img").addClass("mynasicondiv")
            img.src ="vectorimages/pluseicon.svg"  
            $('.rose').html(img);
        
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

此处完成的改进：

• 此处没有双击事件绑定。
• 括号和缩进需要修复。
• 正确设置类名。
• 使用append代替.html

$(function () {
  $('.plusicondiv').on('click', function() {


    var textBox = document.createElement("input");
    textBox.className = 'textbox';

    $('.rose').append(textBox);

    var img = document.createElement("IMG");
    img.className = "mynasicondiv";
    img.src = "https://get.asp.net/images/yeoman.png";
    $('.rose').append(img);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='plusicondiv'>Add image</button>
<div class='rose'></div>

Answer 2

您无需使用两个点击事件并使用追加功能来实现您想要的效果。

＆＃13;

＆＃13;

$(function () {
    $('.plusicondiv').on('click', function () {
        
        var textBox = '<input type="text" class="textBox"/>';
        
        $('.rose').append(textBox);
        
        
        var img = '<img class="mynasicondiv" src="vectorimages/pluseicon.svg"></img>';

        $('.rose').append(img);
        
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rose"></div>
<button class="plusicondiv">Add Element</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

无需两次应用点击事件

$(function () {
    $('.plusicondiv').on('click', function () {
        
      
        var textBox = document.createElement("input");
        //textBox.addClass("textbox");
        $("input").addClass("textbox")
        
        $('.rose').append(textBox);

        //$('.plusicondiv').on('click',function(){
        var img = document.createElement("img");
        $("img").addClass("mynasicondiv")
            img.src ="https://ssl.gstatic.com/onebox/media/olympics/photos/o16/archive/MTZSPDEC74T805NJ_213x120.JPG"  
            $('.rose').append(img);
       //});
     });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rose"></div>
<input type="button" class="plusicondiv" value="plusicondiv">

Answer 4

试试这个

<button class='addmore' id='addmore'>Add Dynamic Data</button>
<div class='data' id="data"></div>
<script type="text/javascript">

document.getElementById('addmore').addEventListener('click', function (e) {
var text_element = document.createElement("input");
var img = document.createElement('img');
var div_data = document.getElementById('data');

img.setAttribute('src', '1.jpeg');

$('.data').append(img);
$('.data').append(text_element);
});

</script>