-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
51 lines (42 loc) · 2.5 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<!-- Other list items -->
</ul>
<script>
// Create a new list item
const newItem = document.createElement("li");
newItem.classList.add("flex-item"); // Apply a class for styling
// Create the SVG icon (you can replace this with your desired SVG)
const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgIcon.setAttribute("width", "15");
svgIcon.setAttribute("height", "15");
svgIcon.setAttribute("fill", "currentColornone");
svgIcon.setAttribute("fill-rule", "evenodd");
svgIcon.setAttribute("clip-rule", "evenodd");
// svgIcon.setAttribute("viewbox", "0 0 15 15");
// Add your SVG path data directly (replace with your desired SVG content)
svgIcon.innerHTML = `<path d="M2.49998 4.09998C2.27906 4.09998 2.09998 4.27906 2.09998 4.49998C2.09998 4.72089 2.27906 4.89998 2.49998 4.89998H12.5C12.7209 4.89998 12.9 4.72089 12.9 4.49998C12.9 4.27906 12.7209 4.09998 12.5 4.09998H2.49998ZM2.49998 6.09998C2.27906 6.09998 2.09998 6.27906 2.09998 6.49998C2.09998 6.72089 2.27906 6.89998 2.49998 6.89998H12.5C12.7209 6.89998 12.9 6.72089 12.9 6.49998C12.9 6.27906 12.7209 6.09998 12.5 6.09998H2.49998ZM2.09998 8.49998C2.09998 8.27906 2.27906 8.09998 2.49998 8.09998H12.5C12.7209 8.09998 12.9 8.27906 12.9 8.49998C12.9 8.72089 12.7209 8.89998 12.5 8.89998H2.49998C2.27906 8.89998 2.09998 8.72089 2.09998 8.49998ZM2.49998 10.1C2.27906 10.1 2.09998 10.2791 2.09998 10.5C2.09998 10.7209 2.27906 10.9 2.49998 10.9H12.5C12.7209 10.9 12.9 10.7209 12.9 10.5C12.9 10.2791 12.7209 10.1 12.5 10.1H2.49998Z"/>`;
// Create the text element
const textElement = document.createElement("span");
textElement.textContent = "Your Text Here";
// Create a button
const buttonElement = document.createElement("button");
buttonElement.textContent = "Click Me";
// Append the SVG icon, text, and button to the new list item
newItem.appendChild(svgIcon);
newItem.appendChild(textElement);
newItem.appendChild(buttonElement);
// Append the new list item to the existing list
const myList = document.getElementById("myList");
myList.appendChild(newItem);
</script>
</body>
</html>