JavaScript 附加 div 并将其宽度设置为与锚文本相同

Question

我正在尝试以编程方式创建一个div，将其附加到父div，并将这个新创建的div的宽度设置为同一父div(其兄弟(的<a>...</a>子中存在的文本宽度。

.html：

<div id='div0'>
<a href="#">text</a>
</div>

js/jquery：

var curDiv = document.getElementById('div0');
var iDiv = document.createElement('div');
iDiv.id = 'newDivId';
iDiv.className = 'newDivClass';
curDiv.appendChild(iDiv);
// the div is appended successfuly
// next step below doesn't work
var curTxt = $('#div0').next("a").text();
var curWidth = curTxt.width();
$('.newDivClass').css('width', curWidth);

我使用.log得到的是变量curTxt = (empty)，它还返回此错误：curTxt.width is not a function。

Answer 1

不需要JS。只需将您的div 设置为display : inline-block.

#div0 {
border: green solid 3px;
display : inline-block;
}
a {
border : blue solid 3px;
font-size : 2rem;
}

<div id='div0'>
<a href="#">text</a>
</div>

Answer 2

你可以这样做

var curDiv = document.getElementById('div0');
var iDiv = document.createElement('div');
iDiv.id = 'newDivId';
iDiv.className = 'newDivClass';
iDiv.style.background = "red"
iDiv.style.height = "10px"
curDiv.appendChild(iDiv);
// the div is appended successfuly
// next step below doesn't work
var curWidth = $('#div0 > a').width();
console.log(curWidth)
$('.newDivClass').css('width', curWidth);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div0'>
<a href="#">text</a>
</div>

您的主要问题是next()链接是孩子时似乎在搜索兄弟姐妹