如何使用jQuery向td追加div并根据td的clientWidth动态设置div宽度

问题原因 #

• 你给div加的Div1不是合法的标识属性，需要改为id="Div1"才能被jQuery选择器匹配
• 后续修改写法存在低级错误：选择器未闭合单引号、变量名拼写错误（tdWidthPx错写为tdWithPx）
• 原选择器写法错误，id选择器需要加#前缀，正确写法为$('#Div1')

最优实现方案（追加时直接设置宽度，首次渲染即生效） #

直接在拼接HTML字符串时把宽度变量注入即可，不需要后续操作：

var td = document.getElementById("someId");
var tdWidth = td.clientWidth; // 示例值: 165
// 模板字符串写法（ES6+支持）
td.append(`<div id="Div1" style="margin:auto; width:${tdWidth}px;"><div msg style="color:red">Text, Text, Text</div></div>`);

如果需要兼容不支持ES6的旧环境，用普通字符串拼接：

var td = document.getElementById("someId");
var tdWidth = td.clientWidth;
td.append('<div id="Div1" style="margin:auto; width:' + tdWidth + 'px;"><div msg style="color:red">Text, Text, Text</div></div>');

后续动态修改宽度的正确写法 #

如果有后续动态调整宽度的需求，确保元素已经插入DOM后执行以下代码即可：

var tdWidthPx = tdWidth + 'px';
$('#Div1').css('width', tdWidthPx);

内容的提问来源于stack exchange，提问作者Shrimp1986