js把标签div写入body指定位置中
时间: 2023-06-13 19:02:46 浏览: 83
你可以使用 JavaScript 中的 DOM 操作来将一个 `<div>` 标签写入到 `<body>` 中的指定位置。以下是一个简单的例子:
HTML:
```html
<body>
<div id="myDiv">这是我的 div 标签</div>
<div id="targetDiv">这是我的目标位置</div>
</body>
```
JavaScript:
```javascript
// 获取要插入的 div 元素
var newDiv = document.getElementById("myDiv");
// 获取要插入到的目标位置
var targetDiv = document.getElementById("targetDiv");
// 将 div 元素插入到目标位置之后
targetDiv.parentNode.insertBefore(newDiv, targetDiv.nextSibling);
```
这个例子中,我们首先获取要插入的 `<div>` 元素和目标位置的 `<div>` 元素,然后使用 `insertBefore()` 方法将要插入的 `<div>` 元素插入到目标位置之后。
相关问题
js 把列表字典写入网页中
你可以使用 JavaScript 将列表或字典数据写入到网页中。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Write List/Dictionary to Webpage</title>
</head>
<body>
<ul id="myList"></ul> <!-- unordered list -->
<br>
<div id="myDict"></div> <!-- dictionary -->
<script>
// create a list
var myList = ["Apple", "Banana", "Orange"];
var listHTML = "";
for (var i = 0; i < myList.length; i++) {
listHTML += "<li>" + myList[i] + "</li>";
}
document.getElementById("myList").innerHTML = listHTML;
// create a dictionary
var myDict = {"Name": "John Doe", "Age": 30, "City": "New York"};
var dictHTML = "";
for (var key in myDict) {
dictHTML += "<p>" + key + ": " + myDict[key] + "</p>";
}
document.getElementById("myDict").innerHTML = dictHTML;
</script>
</body>
</html>
```
在这个示例中,我们使用了 `ul` 元素来展示一个列表,使用 `div` 元素来展示一个字典。我们使用 JavaScript 创建了一个名为 `myList` 的列表和一个名为 `myDict` 的字典,并将它们写入到网页中。对于列表,我们使用了一个 `for` 循环来遍历列表中的每个元素,并将它们包装在 `li` 标签中,最后将整个列表作为 HTML 写入到 `myList` 元素中。对于字典,我们使用了一个 `for...in` 循环来遍历字典中的每个键值对,并将它们包装在 `p` 标签中,最后将整个字典作为 HTML 写入到 `myDict` 元素中。
将CSS和JS写入html中
您可以将CSS和JS代码直接写入HTML文件的头部和尾部的`<style>`和`<script>`标记内。以下是一个示例:
```
<!DOCTYPE html>
<html>
<head>
<title>轮盘选择器</title>
<style>
#roulette {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #eee;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
}
.option {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.option:nth-child(odd) {
transform: rotate(36deg) translate(100px) rotate(-36deg);
}
.option:nth-child(even) {
transform: rotate(72deg) translate(100px) rotate(-72deg);
}
.option:nth-child(1) {
transform: rotate(0deg) translate(100px) rotate(0deg);
}
button {
margin-top: 20px;
font-size: 16px;
padding: 10px 20px;
}
.selected {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<div id="roulette">
<div class="option">汉堡</div>
<div class="option">披萨</div>
<div class="option">牛肉面</div>
<div class="option">炸鸡</div>
<div class="option">麻辣烫</div>
<div class="option">寿司</div>
<div class="option">烤肉</div>
<div class="option">火锅</div>
<div class="option">烤鱼</div>
<div class="option">烤串</div>
</div>
<button onclick="spin()">开始选择</button>
<script>
function spin() {
var options = document.querySelectorAll('.option');
var selected = Math.floor(Math.random() * options.length);
options[selected].classList.add('selected');
}
</script>
</body>
</html>
```
在这个示例中,CSS代码被包含在`<style>`标记内,JavaScript代码被包含在`<script>`标记内。这样做可以使HTML文件更加简洁,但如果CSS和JS代码比较复杂和庞大,建议将它们分别写入独立的文件中,然后使用`<link>`和`<script>`标记将它们引用到HTML文件中。