Reputation: 1497
I have a list of elements (text, inputs, buttons etc...) which parent div structure is same for all.
I want to create a single variable and insert element inside of it.
My actual div structure for all the elements below:
<div class="element-container">
<div class="element-holder">
<div class="eleement-parent">
<div class="text-element">Text</div>
</div>
</div>
</div>
<div class="element-container">
<div class="element-holder">
<div class="eleement-parent">
<div class="button-element"><input type="button" value="My button"></div>
</div>
</div>
</div>
In above example only element type div (text-element, button-element etc...) will change
How can I wrap only element types inside one variable Blow is the code which I am trying to do with no luck :(
It is working as expected, but not the proper way I think.
var container_top = '<div class="element-container"><div class="element-holder"><div class="eleement-parent">';
var container_bottom = '</div></div></div>';
var textElement = jQuery(container_top + '<div class="text-element">Text</div>' + container_bottom);
var buttonElement = jQuery(container_top + '<div class="button-element"><input type="button" value="My button"></div>' + container_bottom);
var inputElement = jQuery(container_top + '<div class="input-element"><input type="text" value="My text field"></div>' + container_bottom);
jQuery(textElement).appendTo('.wrapper');
jQuery(buttonElement).appendTo('.wrapper');
jQuery(inputElement).appendTo('.wrapper');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper"></div>
Upvotes: 0
Views: 62
Reputation: 178401
So you want this:
const $wrapper = $(".wrapper");
const $container = $('<div class="element-container"><div class="element-holder"><div class="element-parent"></div></div></div>');
const $text = $container.clone();
$text.find(".element-parent").append('<div class="text-element">Text</div>')
const $button = $container.clone();
$button.find(".element-parent").append('<div class="button-element"><input type="button" value="My button"></div>');
const $input = $container.clone();
$input.find(".element-parent").append('<div class="input-element"><input type="text" value="My text field"></div>');
$wrapper.append($text);
$wrapper.append($button);
$wrapper.append($input);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper"></div>
Looping
const $wrapper = $(".wrapper");
const $container = $('<div class="element-container"><div class="element-holder"><div class="element-parent"></div></div></div>');
$.each(['<div class="text-element">Text</div>',
'<div class="button-element"><input type="button" value="My button"></div>',
'<div class="input-element"><input type="text" value="My text field"></div>'
],function(i,elem) {
const $wrapped = $container.clone();
$wrapped.find(".element-parent").append(elem);
$wrapper.append($wrapped);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper"></div>
Upvotes: 1