I implemented a chatroom by HTML and Javascript recently.
I don't know how to append the message(class="chat self") to the "chat-container" when I click the button "Send".
Here is the code:
<div id = "chat-container" class="chat-container">
<div class="chat friend">
<div class="user-photo"><img src="images/james.jpg"></div>
<p class="chat-message">How are you?</p>
</div>
<div class="chat self">
<div class="user-photo"><img src="images/curry.jpg"></div>
<p class="chat-message">Fine, thx!</p>
</div>
<div class="chat friend">
<div class="user-photo"><img src="images/james.jpg"></div>
<p class="chat-message">How old are you?</p>
</div>
</div>
<div class="chat-form">
<textarea id="myTextarea" placeholder="Type your message"></textarea>
<button onclick="sendMes()">Send</button>
</div>
My idea is like this:
<script>
function sendMes() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
vara data =
'<div class="chat self">
<div class="user-photo"><img src="images/curry.jpg"></d-wiv>
<p class="chat-message">Fine, thx!</p>
</div>';
data.chat-message = x;
document.getElementById("chat-container").appendChild(data);
}
</script>
I've read a lot of articles about HTML DOM, but they only tell how to change the .innerHTML...
I don't know how to create an div object with class="chat self", and set the object's chat-message to the value in the textarea.
Thanks a lot!
Instead of appending a DOM element to #chat-container you are simply appending a string to it (and that too seems to be malformed)
Maybe you should checkout W3School
A sample implementation of the sendMes() could be like
function sendMes() {
var message = document.getElementById("myTextarea").value // maybe try to sanitize it if you are sending it to server
var messageEl = document.createElement('p')
messageEl.innerHtml = message;
messageel.className = "chat-message"
var userImage = new Image()
userImage.src = "images/curry.jpg"
var imageContainer = document.createElement("div")
imageContainer.appendChild(userImage)
imageContainer.className = "user-photo"
var container = document.createElement("div")
container.appendChild(imageContainer)
container.appendChild(messageEl)
container.className = "chat self"
document.getElementById("chat-container").appendChild(container)
}
Related
If the element has children insert a new div "i-new-element". parent2 and parent3 get a new div.
child3-parent3 has children but doesn't get a new giant. Why?
How can I make it possible for children who have children to get a new div?
it should look like:
<div id="child3-parent3">
<div id="i-new-element"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
var container = document.getElementById("container").querySelectorAll("#container > *");
container.forEach(function(div) {
{
if (div.hasChildNodes()) {
let parentElement = div;
let theFirstChild = parentElement.firstChild;
let newElement = document.createElement("div")
newElement.id = "i-new-eleemnt"
parentElement.insertBefore(newElement, theFirstChild)
}
}
});
<div id="container">
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3-parent3">
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
<div id="parent3">
<div id="child5"></div>
<div id="child6"></div>
</div>
</div>
Using
var container = document.getElementById("container");
var elements = container.querySelectorAll(":scope *");
instead of
var container = document.getElementById("container").querySelectorAll("#container > *");
should fix your problem.
var container = document.getElementById("container");
var elements = container.querySelectorAll(":scope *");
elements.forEach(function(div){
{
if (div.hasChildNodes()) {
let parentElement = div;
let theFirstChild = parentElement.firstChild;
let newElement = document.createElement("div")
newElement.id = "i-new-eleemnt"
parentElement.insertBefore(newElement, theFirstChild)
}
}
});
<div id="container">
<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3-parent3">
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
<div id="parent3">
<div id="child5"></div>
<div id="child6"></div>
</div>
</div>
Edit: Further information about the :scope CSS pseudo-class can be found here and here.
I believe your problem is the following, even it is not described well in your sample HTML:
<div id="parent1"></div> per instance is actually not an empty node but contains some text i.e. <div id="parent1">some text here</div>.
You might believe or not, but node.hasChildNodes() will count any text as a child node (text node, nodeType = 3), so it will always return true is any text is present.
To avoid that, you can filter the text nodes first or just use this workaround:
Replace this line:
if (div.hasChildNodes()) {
with that line:
if (div.children.length) {
children property is not counting text nodes.
That's all you have to do, I believe.
var container = document.querySelectorAll("#container > *");
container.forEach(function(div) {
{
if (div.children.length) {
let parentElement = div;
let theFirstChild = parentElement.children[0];
let newElement = document.createElement("div")
newElement.id = "i-new-eleemnt";
newElement.innerHTML = 'i-new-eleemnt'
parentElement.insertBefore(newElement, theFirstChild);
}
}
});
<div id="container">
<div id="parent1">parent1</div>
<div id="parent2">parent2
<div id="child1">child1</div>
<div id="child2">child2</div>
<div id="child3-parent3">child3-parent3
<div id="child3">child3</div>
<div id="child4">child4</div>
</div>
</div>
<div id="parent3">parent3
<div id="child5">child5</div>
<div id="child6">child6</div>
</div>
</div>
I have the following HTML:
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
How can I wrap the last three elements within .container, so that the output looks like this:
<div class="container">
<h1 class="heading">heading</h1>
<div class="subcontainer">
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
</div>
It would be better to do it within the HTML, but in case due to some constraints that you can't modify the HTML, you can do the followings
const container = document.querySelector('.container');
const subcontainer = document.createElement('div');
const lastThree = Array.from(container.children).slice(-3);
subcontainer.classList.add('subcontainer');
// move the elements into the subcontainer
lastThree.forEach(node => {
subcontainer.appendChild(node);
});
container.appendChild(subcontainer);
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
The class name container is quite generic, make sure that you only select the container element you want, or else you might modify other elements unintentionally.
old_html = document.getElementsByClassName("container")[0];
firstChild = old_html.children[0];
old_html.removeChild(firstChild);
new_html = "<div class='container'>"+ firstChild.outerHTML + "<div class = 'subcontainer'>" + old_html.innerHTML + "</div></div>";
console.log(new_html);
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
I have a JSON object eg:
{ Naam: "bert", Achternaam: "Kopers"}
I would like to render this to a DIV element on my HTML page. It should look like this:
<div id = "contents>
<div class="setting-label">
Naam
</div>
<div class="setting-value">
bert
</div>
</div>
<div class="setting-row">
<div class="setting-label">
AchterNaam
</div>
<div class="setting-value">
kopers
</div>
</div>
Preferably I would like to this without innerHTML. So with appendChild. How does the code look like?
This should work:
onload = function() {
var person = {Naam: "Bert", Achternaam: "Kopers"};
var contents = document.getElementById("contents");
for(var key in person) {
var personDiv = document.createElement("div");
var div1 = document.createElement("div");
var text1 = document.createTextNode(key);
div1.appendChild(text1);
var div2 = document.createElement("div");
var text2 = document.createTextNode(person[key]);
div2.appendChild(text2);
personDiv.appendChild(div1);
personDiv.appendChild(div2);
contents.appendChild(personDiv);
}
}
<div id="contents"></div>
Will give you an HTML output of:
<div id="contents">
<div>
<div>Naam</div>
<div>Bert</div>
</div>
<div>
<div>Achternaam</div>
<div>Kopers</div>
</div>
</div>
<div id="inst4" class="block_navigation block">
<div class="content">
<div> Content Start here !!!</div>
</div>
</div>
<script>
var blockNav = document.getElementsByClassName("block_navigation")[0].getElementsByClassName("content");
blockNavIcon = document.createElement("img");
blockNavIcon.setAttribute("src", blockIcon);
blockNav.appendChild(blockNavIcon);
}
</script>
Here I am targeting content class, but it is not working, How can i do this any solution.
There are few problems in your script, you are using the class block_navigation twice, also blockNav is a NodeList
You can easily use .querySelector()
var blockNav = document.querySelector(".block_navigation .content");
blockNavIcon = document.createElement("img");
blockNavIcon.setAttribute("src", '//placehold.it/64');
blockNav.appendChild(blockNavIcon);
<div id="inst4" class="block_navigation block">
<div class="content">
<div>Content Start here !!!</div>
</div>
</div>
You can use use .getElementsByClassName("content")[0]
Hope this wil be helpful
var blockIcon = "http://weknowyourdreams.com/images/forest/forest-04.jpg";
var blockNav = document.getElementsByClassName("block_navigation")[0]
.getElementsByClassName("content")[0]; // Will select the child element
blockNavIcon = document.createElement("img");
blockNavIcon.setAttribute("src", blockIcon);
blockNav.appendChild(blockNavIcon)
JSFIDDLE
I have comment block and it's child block with reply. Both have information block with a link to user profile and text value with user's name. I create link to send a private message to user, but it works only if I mark it with it's number in array.
Here is html markup:
<div class="comments_list">
<div class="comment_item">
<div class="comment_body">
<div class="info">
Test
</div>
<p>Some parent text</p>
</div>
<div class="reply_comments">
<div class="comment_body">
<div class="info">
Fred
</div>
<p>Some child text</p>
</div>
</div>
</div>
<div class="comment_item">
<div class="comment_body">
<div class="info">
Ken
</div>
<p>Another parent text</p>
</div>
<div class="reply_comments">
<div class="comment_body">
<div class="info">
Jack
</div>
<p>Another child text</p>
</div>
</div>
</div>
</div>
Here is the code:
var infobars = document.querySelectorAll('.info');
var usernames = document.querySelectorAll('.info > .username');
function clickPm(event) {
event.preventDefault();
alert(window.location.pathname = '/conversation/' + usernames[1].innerHTML);
//alert here to show that username passed properly
}
var newContainer = document.createElement('span');
newContainer.className = 'container';
var newBtn = document.createElement('a');
newBtn.className = 'pmlink';
newBtn.appendChild(document.createTextNode('send message'));
newBtn.href="#";
newBtn.onclick = clickPm;
newContainer.appendChild(newBtn);
infobars[1].appendChild(newBtn);
Sorry for my bad JavaScript knowledge and newbie question.
Hope you can help me to resolve it in pure JavaScript without jQuery or else.
Demo on JsFiddle
Try this
Updated
function clickPm(event) {
event.preventDefault();
var username = event.target.parentElement.parentElement.querySelector('a.username').innerText;
alert(window.location.pathname = '/conversations/' + username);
}
Array.prototype.forEach.call(infobars, function(el) {
var newContainer = document.createElement('span');
newContainer.className = 'container';
var newBtn = document.createElement('a');
newBtn.className = 'pmlink';
newBtn.appendChild(document.createTextNode('send message'));
newBtn.href="#";
newBtn.onclick = clickPm;
newContainer.appendChild(newBtn);
el.appendChild(newBtn);
});
Not exactly sure what you're asking here but I think this is what you want..