jquery - リストからdiv内のテキストを自動的に変更する

Question

現在、「私は [役割] です」という紹介セクションを含むサイトを構築しています。私がやりたいことは、役割のリスト (つまり、Web デザイナー、UX 開発者、グラフィック デザイナーなど) を宣言し、[役割] にテキストを入れて、それぞれを自動的に循環させることです。

次のようなもの：

HTML:

<p>Hi there I'm a <span id="role"></div>.</p>

jQuery:

$(document).ready(function(){
    $('#role').html('web designer').delay(400).html('graphic designer')
    .delay(400).html('UX developer');
});

これが解決策であることは知っていますが、最初に「ロール」のリストを宣言してから、リストをhtmlで循環させることでこれを達成するにはどうすればよいですか?

ありがとう