Pass HTML element to div like string - javascript

I'm trying to pass HTML text to my div, I need this string rendered as HTML elements, My code:
<div id="divchat" style="width: 500px; height: 300px; border: 2px solid brown;"/></div>
#Html.TextBoxFor(model => model.msj)
<button type="submit" id="btnSend">Send</button>
<script>
$(function(){
var chatNS = '#HttpContext.Current.Application["Chateo"].ToString()';
$("#divchat").append(chatNS);
});
</script>
div is showing content just like a string, how could I get HTML elements to be rendered correctly into divchat?

Have you tried wrapping your HttpContext.Current.Application["Chateo"] in #Html.Raw()?
<script>
$(function(){
var chatNS = '#Html.Raw(HttpContext.Current.Application["Chateo"])';
$("#divchat").append(chatNS);
});
</script>

Try
$("#divchat").html(chatNS);

Related

Better ways of inserting simple HTML into a div using JavaScript

I'm always seeming to have to insert HTML into a load of divs using jQuery, but I prefer JavaScrip and wonder if anybody has any better ways of doing it. See the typical example below:
let boxes = document.querySelectorAll('.main-editor-output');
for (let box of boxes) {
console.log(box);
$( "<p>Test</p>" ).prependTo(box);
}
.main-editor-output {
border: 1px solid black;
margin-top: 10px;
min-height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id='parent'>
<div class="main-editor-output"></div>
<div class="main-editor-output"></div>
</div>
Here I'm just using a simple line of jQuery to insert HTML into the test divs. I could do it using javascript, but that would require too many lines of code. Does anyone have any better ways of doing this?
Thanks for any ideas!
Codepen: https://codepen.io/ns91/pen/GRKGwZP
you can use insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
in your example it would be box.insertAdjacentHTML('afterbegin', '<p>Test</p>');
demo:
let boxes = document.querySelectorAll('.main-editor-output');
for (let box of boxes) {
console.log(box);
box.insertAdjacentHTML('afterbegin', '<p>Test</p>');
}
.main-editor-output {
border: 1px solid black;
margin-top: 10px;
min-height: 1em;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<div id='parent'>
<div class="main-editor-output">
Existing text
</div>
<div class="main-editor-output">
</div>
</div>
In Vanilla JavaScript you can:
create an item with createElement
append it with appendChild
prepend it with insertBefore
For example, the following code will create two inputs, assign them an id and a value, then append the first and prepend the second inside a div with id container:
let container = document.getElementById('container');
let input1 = document.createElement('input');
input1.id = 'input1';
input1.value = 'I am input 1!';
container.appendChild(input1);
let input2 = document.createElement('input');
input2.id = 'input2';
input2.value = 'I am input 2!';
container.insertBefore(input2, input1);
<div id="container"></div>
You can use $element.innerHTML, which is a native JavaScript property of elements.
It works similar to the jQuery element method $element.html().
<div id="test">Pre Text</div>
<script> document.querySelector('#test').innerHTML = 'Post Text'; </script>
I don't know if it's exactly what you're looking for, but in any case you can use document.createElement to create the child element, and add it to the parent element using the prepend method:
let boxes = document.querySelectorAll('.main-editor-output');
for (let box of boxes) {
console.log(box);
let element = document.createElement("p");
element.append("Test");
box.prepend(element);
}
.main-editor-output {
border: 1px solid black;
margin-top: 10px;
min-height: 1em;
}
<head>
</head>
<div id='parent'>
<div class="main-editor-output">
</div>
<div class="main-editor-output">
</div>
</div>

appending complete html of one dive into new div

I am using JQuery for this:
Taking complete html and appending into a new div
My JQuery code:
$(document).ready(function(){
$("#addNew").click(function(){
var maindiv = document.getElementById('nestedFeilds').html();
$("#showhere").append('maindiv');
});
});
The HTML is pretty complex and lengthy so take just reference
<div class= "row" id="mainContainer">
<label for="Education" style="margin-left: 30px ; float:left;">Education</label>
<div class="col-xs-4 inner"></div>
<div class="col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none;">
In the last div, it is actually a form and I need its complete html to be shown with different name attribute when ever I click button
I am calling my function like this
<div id= "showhere"></div>
<div style="margin-left: 133px;float:left;">
<a id="addNew"> Add Education</a>
</div>
If you want to get innerHTML, you should use element.innerHTML, and if you want to append previously saved inner HTML, you can use element.append(variableWithPreviousInnerHTML). Here is the working example:
$(document).ready(function() {
$("#addNew").click(function() {
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#showhere").append(maindiv);
});
});
div {
width: 100px;
height: 100px;
border: 1px gray solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nestedFeilds">Content from #nestedFeilds</div>
<div id="showhere"></div>
<button id="addNew">Click</button>
If anything isn't clear, feel free to ask.

What's the best way to add an element in an existing class element with basic j.s , jQuery?

Say I had some code in HTML like:
<div id="some_element" class="element_class">
How do I add/create a new div element and add it to the "element_class" with j.s/jQuery?
You can do like this using only javascript
var createDiv = document.createElement('div');
createDiv.textContent='inner div';
document.getElementById('some_element').appendChild(createDiv)
Using Jquery
To add elements at the end
$('#some_element').append("<div>1</div><div>2</div>");
To add element in in the starting
$('#some_element').prepend("<div>1</div><div>2</div>");
Here's a simple solution. Hope it helps!
$(document).ready(function(){
$("#mybutton").click(function () {
if($('.newDiv').length !== 1){
$("#some_element").append("<div class = 'newDiv'>This is a new div</div>");
}
});
});
.newDiv{
height: 80px;
width: 40px;
background: yellow;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id = "mybutton">Click me</button>
<div id="some_element" class="element_class">

JQuery: Clicking a nested Img with a certain URL

There is a div having a certain attribute contains many nested divs. One of them contains an image tag with a certain src. How do I access that? Following code is not working:
var tbox = $('div[role="user"]'); // These could be multiple
tbox.click(function(){
$(this).find('img[src="path/to/img.png"]').click();
});
You could use the "ends-with" selector $= :
$(this).find('img[src$="path/to/img.png"]').click();
You can see an example of this demonstrated below :
$(function(){
$("#box").click(function(){
debugger;
$(this).find('a[href$="test"]').css('color','red');
});
});
#box{
background: #ddd;
height: 200px;
width: 200px;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='box'>
<a href='#test'>TEST</a>
<a href='#test'>NOT TEST</a>
<a href='#not'>TEST</a>
<a href='#not'>NOT TEST</a>
</div>

stuck with onclick tried google couldn't find answer

i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"
The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value
you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
The .val() method is sometimes useful:
var input = $("#Input").val();

Categories