JQuery - o'zgaruvchan HTML satrlari uchun HTML satrini qo'shish

HTML satrini yaratishga harakat qilmoqchiman, keyin HTML-satrni qo'shimcha HTML va atributlar bilan o'zgartiraman, lekin u ishlamayapti. Men noto'g'ri ish qilyapman?

$(document).ready(function(){
    $('body').on('click', 'button', function(){
        var thing     = '<div class="thing"></div>';
        var close     = 'close';

        $(thing).append(close);

        $('.canvas').append(thing);

        return false;
    });
});

Men ularni DOMga qo'shmasdan oldin ularni bir o'zgaruvchiga birlashtirish orqali ishlashga muvaffaq bo'ldim, ammo bu men o'qishni qiyinlashtirmoqda. Buning boshqa usullari bormi?

Here is a fiddle.

3

6 javoblar

Updated fiddle.

Ushbu ifodani $ (thing) .append (yopish); o'zgarmaydigan narsa ga qaytarib berishni belgilashingiz kerak:

thing = $(thing).append(close);

Boshqa o'zgarmaydigan qiymati har doim ham standart ifodalangan <div class = "thing"> </div> qiymatiga ega bo'ladi.

Umid qilamanki bu yordam.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
  $('body').on('click', 'button', function(){
    var thing     = '<div class="thing"></div>';
    var close     = 'close';

    $('.canvas').append( $(thing).append(close) );

    return false;
  });
});
.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>
</div> </div>
4
qo'shib qo'ydi

Jquery-ni qo'shish usuli sahifaning DOM-ga qo'shiladi. Agar o'qish uchun ko'proq o'qishni xohlasangiz, buni sinab ko'ring:

var thing = '<div class="thing">';
thing    += 'close';
thing    += '</div>';

$('.canvas').append(thing);
2
qo'shib qo'ydi

Jarayon o'rniga yangi DOM elementini yaratishingiz mumkin. Shu tarzda siz osongina qo'sha olasiz. Misol:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
        $('body').on('click', 'button', function(){

        var thing         =  jQuery('<div/>', {
            class: 'thing'
        });

        var close         = jQuery('', {
            class: 'close',
            href: '#',
            text:'close'
        }).appendTo(thing);

    
        $('.canvas').append(thing);
            return false;
        });
});
.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>
</div> </div>
1
qo'shib qo'ydi

Faqat Zakaria Acharkining javobiga qo'shimcha kodni qo'shib qo'ydingiz, shunda siz yaratilgan divslarni yopmoqchisiz:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
        $('body').on('click', 'button', function(){
                var thing         = '<div class="thing"></div>';
                var close         = 'close';

                thing = $(thing).append(close);
    
                $('.canvas').append(thing);
    
                return false;
        });

$('body').on('click', '.close', function(){
        $(this).parent().remove();
});
});
.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>
</div> </div>

Hurmat bilan

0
qo'shib qo'ydi

Bu juda oson. parseHTML usulini xato qildingiz. HTML satrini jQuery ob'ektiga ajratadi.

Qaror:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
        $('body').on('click', 'button', function(){
                var thing         = '<div class="thing"></div>';
                var close         = 'close';

                var html = $.parseHTML(thing);
    $(html).append(close);
    
                $('.canvas').append(html);
    
                return false;
        });
});
.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>
</div> </div>
0
qo'shib qo'ydi

buni sinab ko'ring

$(document).ready(function(){
$('body').on('click', 'button', function(){
    var thing = '<div class="thing"></div>';
    var close = 'close';
    $('.canvas').append(thing);
    $('.thing').append(close);
    return false;
});

});

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb