Suppose we want to add the content of different elements in a single element, we use append for that.
Below is the example which will append the text of an input into a div.
HTML-
<div class="aside_header" id="sentence_addable">
<div class="">
<button class="right_edit_btn">Click here to append data</button>
</div>
<div class="content1">
<input type="text" class="sentence_input1" id="sentence_input1">
</div>
<div class="col-md-2">
<input type="text" class="sentence_input2" id="sentence_input2">
</div>
</div>
<div id="add_sentenceDiv"></div>
CSS-
.aside_header{border: 1px solid #ccc; margin: 15px 10px;padding: 10px; border-radius: 5px; width: 50%; margin: 0 auto;}
.aside_header div >div{padding-right: 0;}
.aside_header div >div p{word-break: break-all;}
.aside_header div >div:last-child{padding-right: 10px; padding-left: 5px;}
.aside_header div > input{width: 100%; background-color: #E1E1E1; border: none; height: 35px;}
.right_edit_btn{height: 40px; max-width: 100%; padding: 0;}
.right_edit_btn img{max-height: 100%; max-width: 100%;}
.content1{padding: 5px 0;}
JQUERY-
$(document).ready(function(){
$('.right_edit_btn').click(function() {
var input_Sentence1 = document.getElementById('sentence_input1').value.trim();
var input_Sentence2 = document.getElementById('sentence_input2').value.trim();
if (input_Sentence1 !=="" && input_Sentence2 !=="" ) {
$("#add_sentenceDiv").append('<div class="aside_header"><div class="content1"><p>'+input_Sentence1+'</p></div><div class="content2"><p>'+input_Sentence2+'</p></div></div></div>');
$("#sentence_input1").val("");
$("#sentence_input2").val("");
}
});
});
https://jsfiddle.net/ur23jwfs/1/
0 Comment(s)