Dynamically create image for <li>

I want to create image on list <li> during runtime.

Please help.

Here is my code:

Expand|Select|Wrap|Line Numbers

 
function myFunction() { 

var ul = document.getElementById("list");

var li = document.createElement("li");

li.appendChild(document.createTextNode(<img src=picture.jpg)); // I want the image to go here. any suggestion?

ul.appendChild(li);

Oct 30 '14 #1

Subscribe Post Reply

1705

Dormilich

8,658

Expert Mod 8TB

erm, you are aware that document.createTextNode() creates a literal text no matter what you put in (hence the name!) ?

the solution: create an image element (just like you did with the <li> element)

Oct 30 '14 #2

jmrker

One possible, of many available, solution...

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title> HTML5 page </title>

</head>

<body>

<ul id="list"></ul>
 
<script type="text/javascript">

function myFunction(imageName,imageText) { 

  var ul = document.getElementById("list");

  var li = document.createElement("li");

  var img = document.createElement('img');

  img.setAttribute("src", imageName);

  img.setAttribute("width", "150");

  img.setAttribute("width", "125");

  img.setAttribute("alt", imageText);
 
  li.appendChild(img); // I want the image to go here. any suggestion?

  ul.appendChild(li);

}

window.onload = function() {

  myFunction("http://www.nova.edu/hpd/otm/pics/4fun/11.jpg","Exhausted");

  myFunction("http://www.nova.edu/hpd/otm/pics/4fun/21.jpg","Angry");

  myFunction("http://www.nova.edu/hpd/otm/pics/4fun/31.jpg","Embarrassed");

}

</script>
 
</body>

</html>

Jan 1 '15 #3

Similar topics

Image List

by: Curtis Wellborn | last post by:

Hey, I was wondering if there is any way in the designer to put my Icons(which i have 200 in three different folders) into an ImageList with out doing it one by one in the add image. This will...

C# / C Sharp

Creating tables during runtime

by: Newbie | last post by:

Hello! I'm trying to figure out how to do the following: I need to show a table (perhaps using DataGrids, repeaters or others) for each salesperson in the sales dept. But the no. of tables...

C# / C Sharp

something like image list!

by: Just close your eyes and see | last post by:

is there any control in .NET like image list but it can store files from any type, not only image format ? thx all :)

C# / C Sharp

Change impersonated user during runtime

by: Markus Stehle | last post by:

Hi all! I have asp.net web application that uses static impersonation. Is it possible to change the impersonated user during runtime? Within some parts of my application I would like to...

ASP.NET

enumeration and how to populate them during runtime

by: Sampson | last post by:

I have a question about enumeration and how to populate them during runtime. I am using vb.net but will happily take any advice in c# as well. Here is an example to help illustrate what I am...

Visual Basic .NET

Dynamic creation of object during runtime

by: murali pannala via .NET 247 | last post by:

(Type your message here) -------------------------------- From: murali pannala i would want to create an object dynamically. i.e i hold my class name in a variable only.and by passing this...

Visual Basic .NET

Create Image From Stream

by: John Daly | last post by:

Does anyone know how to create an image (JPEG) from an HTTPResponse object? I am working on system that has a map pop up from our GIS department. I want create an image at runtime from this popup...

.NET Framework

Require to export to excel with the dynamic SQL generated during runtime in the Form

by: ruthboaz | last post by:

Hi, I am creating the following query during run-time. Dim ctl As Control Dim varItem As Variant Dim strSQL As String Dim stDocName As String

Microsoft Access / VBA

create app.config during runtime from within code

by: Christian Muggli | last post by:

can someone explain me how to create a app.config file during runtime? i see two ways: - add a skeleton of an app.config file to the exe/dll and extract it during runtime as a resource and...

C# / C Sharp

Compilation during runtime problem

by: Xeevis | last post by:

Hey, I have kinda complicated problem. I have console application which itself compile Scripts Library during runtime and then it uses it (allow ppl to drop in plain .cs files without need to build...

.NET Framework

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA