I created and h1 in JS using an API but now it is not appearing on my webpage.
If I try to change the style, things around it change but the text still never appears.
Here is my HTML:
<div id="profile-image" class="profile-image"></div>
<div class="profile-name"></div>
Here is my JS:
fetch(GITHUB_URL)
.then(function(response) {
return response.json();
})
.then(function (data) {
const img = document.createElement('img');
img.src = data.avatar_url;
img.alt = 'Github prof'
document.querySelector(".profile-image").appendChild(img);
const h1 = document.createElement('h1');
h1.src = data.name;
h1.alt = "my name";
document.querySelector(".profile-name").appendChild(h1);
The image worked and is visible on my webpage. The h1 was supposed to appear underneath that but it is not. When I console.log(data.name) the text that I want appears. There are no errors in my console. Simply the text of the h1 does not appear.
Thanks
An HTML heading element does not have src or alt attributes.
Perhaps you mean
const data = {"name": "Fred", "avatar_url": "https://via.placeholder.com/150" }
const img = new Image();
img.src = data.name;
img.alt = 'Github prof';
document.querySelector(".profile-image").appendChild(img);
const h1 = document.createElement('h1');
h1.appendChild(document.createTextNode(data.name));
document.querySelector(".profile-name").appendChild(h1);
<div id="profile-image" class="profile-image"></div>
<div class="profile-name"></div>
h1 tag does not have a src attributes, if you want to show the value in h1 use innerText instead of src
use
const h1 = document.createElement('h1');
h1.innerText = "sample text";
h1.alt = "my name";
document.querySelector(".profile-name").appendChild(h1);
<div class="profile-name"></div>
Related
I have a modal that displays API images within a modal, and I want the "Add To Favourites" link to be shown within the modal.
So far, I can display the "title", "explanation" and "date" by using result.title etc.
However when I use result.saveText to display the "add to favourites" as a HTML link is display undefined.
How do I display the "Add To Favourites as an HTML link within the modal?
// Image
const image = document.createElement("img");
image.src = result.url;
image.alt = result.title + "<br>" + result.explanation + "<br>" + result.date;
image.loading = "lazy";
image.classList.add("card-img-top");
// Card Title
const cardTitle = document.createElement("h5");
cardTitle.classList.add("card-title");
cardTitle.textContent = result.title;
// Save Text
const saveText = document.createElement("p");
saveText.classList.add("clickable");
if (page === "results") {
saveText.textContent = "Add To Favorites";
saveText.setAttribute("onclick", `saveFavorite('${result.url}')`);
} else {
saveText.textContent = "Remove Favorite";
saveText.setAttribute("onclick", `removeFavorite('${result.url}')`);
}
There is nothing wrong with your code showing (except not appending it either to a parent element or document.body)
I check your model and I found that the saveText doesn't append to any parent element or any document.body. The element of your code doesn't even has p tag.
Your probably should use append method to append it to either a parent element or a child element. In your situation, you probably should use cardTitle.appendChild(SaveText)
Doesn't even has p tag in your whole body:
document.querySelectorAll('img')[1].onerror = function(){
let div = document.createElement('div')
div.textContent = 'Link is invalid.'
document.body.appendChild(div)
}
<img src="invalid.jpg" alt ="<a href='https://www.w3schools.com'>Visit W3Schools.com!</a>">
<img src="invalid.jpg" >
I'm trying to make a news page in Javascript where every article is on a card. Every card has a headline, an image and the author's name. The headlines show up fine, but the images are broken and the author names don't show up at all. My code looks like this:
function cardCreator(e) {
const cards = document.querySelector('.cards-container');
function cardCreator(e) {
const card = document.createElement('div');
card.classList.add('card');
const headline = document.createElement('div');
headline.classList.add('headline');
headline.textContent = e.headline;
card.appendChild(headline);
const author = document.createElement('div');
author.classList.add('e.author');
card.appendChild(author);
const container = document.createElement('div');
container.classList.add('img');
author.appendChild(container);
const img = document.createElement('img');
img.src = e
container.appendChild(img);
const span = document.createElement('span');
author.appendChild(span);
span.text = `By ${author}`
cards.appendChild(card);
return card;
}
I thought it was the img src, but if I change out the e the whole page breaks so I'm at a loss. Any help would be appreciated.
In Javascript, I am trying to dynamically create an HTML <template> element, append an <h1> element as its child, clone the template's contents, and then append the template to the document body.
The problem is when I access the content property of the template it just returns #document-fragment.
Here's the code:
var temp = document.createElement('template');
var h1 = document.createElement('h1');
h1.textContent = 'hello';
var div = document.createElement('div').appendChild(h1)
temp.appendChild(div)
console.log('temp: ', temp)
console.log('temp content: ', temp.content)
var c = document.importNode(temp.content, true)
document.body.appendChild(c)
And here is the output for the console.log's:
What am I doing wrong here? Why is the template's contents showing up as empty?
When you create a <template>, you should append DOM content (with appendChild()) to the .content property (which is a DocumentFragment), not to the element itself.
var temp = document.createElement('template');
var h1 = document.createElement('h1');
h1.textContent = 'hello';
var div = document.createElement('div')
div.appendChild(h1)
//append DOM to .content
temp.content.appendChild(div)
console.log('temp: ', temp)
console.log('temp content: ', temp.content)
var c = document.importNode(temp.content, true)
document.body.appendChild(c)
An alternative is to add a HTML string via the innerHTML property.
temp.innerHTML = '<div><h1>Hello</h1></div>'
Note, var div = document.createElement('div').appendChild(h1) sets div variable to h1, the appended element, not div element; see What is the behavior of document.createElement when passed as an argument?.
Set .innerHTML of <template> to .outerHTML of div element, call .appendChild() chained to document.body with temp.content as parameter.
window.onload = function() {
var temp = document.createElement('template');
var h1 = document.createElement('h1');
h1.textContent = 'hello';
var div = document.createElement('div');
div.appendChild(h1);
temp.innerHTML = div.outerHTML;
console.log('temp: ', temp.content);
document.body.appendChild(temp.content);
}
<body></body>
How do I change the HREF for an anchor tag that is inside an ordered list? More specifically, how do I change the HREF of the anchor tag in my specific case where the list is appended to the body?
Here is what I have tried so far:
var image = document.createElement("img");
image.src = "http://archiveteam.org/images/1/15/Apple-logo.jpg"
image.className = "image";
var aboutMe = document.createElement("p");
aboutMe.innerHTML = "Hello";
aboutMe.className = "Border";
var movies = ["Inception", "Remember the Titans", "Happy Gilmore", "Interstellar", "The Martian"]
var listOfMovies = document.createElement("ol");
for (var i = 0; i < 5; i++) {
var anchor = document.createElement("a");
anchor.href = "#";
anchor.innerHTML = movies[i];
var bullets = document.createElement("li");
bullets.appendChild(anchor);
listOfMovies.appendChild(bullets);
}
listOfMovies.getElementsByTagName("li")[0].href = 'http://www.imdb.com/title/tt1375666/';
listOfMovies.getElementsByTagName("li")[1].href = 'http://www.imdb.com/title/tt0210945/';
listOfMovies.getElementsByTagName("li")[2].href = 'http://www.imdb.com/title/tt0116483/';
listOfMovies.getElementsByTagName("li")[3].href = 'http://www.imdb.com/title/tt0816692/';
listOfMovies.getElementsByTagName("li")[4].href = 'http://www.imdb.com/title/tt3659388/';
document.body.appendChild(image);
document.body.appendChild(aboutMe);
document.body.appendChild(listOfMovies)
listOfMovies.className = "Border"
You are setting the li element's href attribute instead of the a (anchor) element. So your first line of code to change the href should be:
listOfMovies.getElementsByTagName("a")[0].href = 'http://www.imdb.com/title/tt1375666/';
You could also iterate through this list to have simpler code by adding the href's to an array in the same order as movies or even creating a movies object with Movie title and url like:
movies = [{ title: "Inception", url: "http://www.imdb.com/title/tt1375666/" },{...}...];
I have a piece of JavaScript which is meant to be dynamically creating a nested set of Div's in my application. The parent Div is being created just fine, however the inner Div is not rendering at all.
Any help would be great!
JavaScript:
function createWindow()
{
var note_window = document.createElement("div");
note_window.setAttribute("id", "note_window");
note_window.setAttribute("class", "notification-window");
note_window.style.visibility = 'visible';
var title = document.createElement("div");
title.setAttribute("id", "title");
title.setAttribute("class", "col-md-12");
title.innerHTML = "Notifications";
note_window.appendChild(title);
var navbar = document.getElementById("navbar");
navbar.appendChild(note_window);
}
Rendered HTML:
<div id="note_window" class="notification-window" style="visibility: visible;">
Text
</div>
Desired HTML:
<div id="note_window" class="notification-window" style="visibility: visible;">
Text
<div id="title" class="col-md-12">
More Text
</div>
</div>
EDIT:
Thanks for your help guys, I have partly answered my own question...
Further down in my code there is another function which edits the contents of note_window.
if (document.getElementById("note_window") == null)
{
createWindow();
if (getNotifications() == null) {
note_window.innerHTML = "Text"
}
}
When I comment out the code for setting the innerHTML, both Div's render correctly... Now the question is... Why!?
Are you looking for this?
var note_window;
var title;
function createWindow()
{
note_window = document.createElement("div");
note_window.setAttribute("id", "note_window");
note_window.setAttribute("class", "notification-window");
note_window.style.visibility = 'visible';
//note_window.innerHTML = "Text";
title = document.createElement("div");
title.setAttribute("id", "title");
title.setAttribute("class", "col-md-12");
title.innerHTML = "Notifications";
note_window.appendChild(title);
var navbar = document.getElementById("navbar");
navbar.appendChild(note_window);
}
function getNotifications() {
return null;
}
if (document.getElementById("note_window") == null)
{
createWindow();
if (getNotifications() == null) {
var text = document.createTextNode('Text');
title.parentNode.insertBefore(text, title);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">some content</div>
Or this (in case everything needs to be created dynamically via JavaScript):
http://plnkr.co/edit/3pNmY3UnqbgZWpSFVH66?p=preview
function createWindow()
{
var note_window = document.createElement("div");
var title = document.createElement("div");
var navbar = document.createElement("div");
note_window.setAttribute("id", "note_window");
note_window.setAttribute("class", "notification-window");
note_window.style.visibility = 'visible';
title.setAttribute("id", "title");
title.setAttribute("class", "col-md-12");
title.innerHTML = "Notifications";
navbar.setAttribute("id", "navbar");
note_window.appendChild(title);
navbar.appendChild(note_window);
document.getElementsByTagName('body')[0].appendChild(note_window);
}
And the HTML markup
<body onload="createWindow()"></body>
Your code seems to be working for me, I've just modified the text to match to your example. I have a jsfiddle https://jsfiddle.net/yye4dsqm/3/
function createWindow() {
var note_window = document.createElement("div");
note_window.setAttribute("id", "note_window");
note_window.setAttribute("class", "notification-window");
note_window.style.visibility = 'visible';
note_window.innerHTML = 'Text';
var title = document.createElement("div");
title.setAttribute("id", "title");
title.setAttribute("class", "col-md-12");
title.innerHTML = "More Text";
note_window.appendChild(title);
var navbar = document.getElementById("navbar");
navbar.appendChild(note_window);
}
createWindow();
Seems so simple now...
In my edit I mention that I am setting the innerHTML of the parent DIV, this is then overriding the entire child DIV with text. Setting a break point after the initial creation shows the elements rendered correctly.
I wasn't seeing it before as I was only looking at the elements after the call had been made to set the innerHTML.
Thanks guys!
Outside perspective always helps! :)